更改Angularjsdatepicker指令中的ngmodel值

问题描述：

我试图将引导日期选择器从eternicode转换为angularjs指令并允许选择星期模式。问题是价值{{VAR1}}从视图并不反映我的指令更改Angularjsdatepicker指令中的ngmodel值

设置

weekDatePicker指令中的自定义值：

var app = angular.module('angular.controls', []) 
app.directive('weekDatePicker', ['$filter','$parse', function ($filter, $parse) { 
    return { 
     restrict: 'A', 
     require: 'ngModel', 
     link: function (scope, element, attrs, ngModelCtrl) { 
      console.log('start'); 
      element.datepicker({ 
       //minViewMode: 1, 
       //format: "MM-yyyy"      
      }).on('changeDate', function (e) { 
       scope.$apply(function() { 

        var date = e.date;// element.datepicker('getDate'); 
        startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay()); 
        endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);     

        startDate = $filter('date')(startDate, 'dd-MM-yyyy'); 
        endDate = $filter('date')(endDate, 'dd-MM-yyyy'); 
        dateText = startDate + ' - ' + endDate; 
        e.date = dateText;  

        //console.log(e.date); 
        ngModelCtrl.$setViewValue(dateText); //>> no change from view 
        console.log(ngModelCtrl); 
       }); 
      });    
     } 
    }; 
}]);

你可以看到整个代码在jsFiddle

查看：<input week-date-picker ng-model="var1" class="form-control" /> {{var1}} >>为什么它没有从指令获得自定义值？

var1反映正确的值无论你在日历中选择什么是确切的问题是什么？ – dhavalcengg

我想用自定义格式ngModelCtrl更新模型值。$ setViewValue（dateText）; >>应该像星期几一样出现像20-04-2014 - 27-04-2014 –

答

我已付出你fiddle

var app = angular.module('angular.controls', []) 
app.directive('weekDatePicker', ['$filter','$parse', function ($filter, $parse) { 
    return { 
     restrict: 'A', 
     require: 'ngModel', 
     link: function (scope, element, attrs, ngModelCtrl) { 
      console.log('start'); 
      var ngModelParseFn = $parse(attrs.ngModel); 
      element.datepicker({ 
       //minViewMode: 1, 
       //format: "MM-yyyy", 
       // language: "vi" 
      }) 

      scope.$watch(function() { 
       return ngModelCtrl.$modelValue; 
      }, function (newValue) { 
       var date = element.data().datepicker.viewDate; 
       startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay()); 
       endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);     

       startDate = $filter('date')(startDate, 'dd-MM-yyyy'); 
       endDate = $filter('date')(endDate, 'dd-MM-yyyy'); 
       dateText = startDate + ' - ' + endDate; 
       ngModelParseFn.assign(scope, dateText); 
      }); 

     } 

    }; 
}]);

希望这是你想要的。

感谢您的帮助 –

这是你想要的吗？ – dhavalcengg

更改Angularjsdatepicker指令中的ngmodel值

相关推荐