AngularJS:使用一个指令设置两个datepickers最小和最大日期

时间:2014-04-26 06:43:53

标签: jquery angularjs angularjs-directive jquery-ui-datepicker

引用此库http://www.codinginsight.com/angularjs-and-pickadate/我想为minDate实现相同的行为,而使用jquery datepicker的指令则使用maxDate。 以下是我的jquery datepicker指令代码,其中我想禁用endDate datepicker的先前日期选择,即第二个datepicker:

 define(['./module'], function(directives) {
'use strict';
  directives.directive('ngDate', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        scope: {
            minDate: '=',
            maxDate: '='
        },
        link: function(scope, element, attrs, ngModelCtrl) {
            $(element).datepicker({
                changeYear: true,
                changeMonth: true,
                dateFormat: 'dd-mm-yy',
                onSelect: function(date) {
                    ngModelCtrl.$setViewValue(date);
                    scope.$apply();
                }
            });
            console.log(scope.minDate);
            $(element).datepicker('option','minDate', scope.minDate ? scope.minDate : false);
            $(element).datepicker('option','maxDate', scope.maxDate ? scope.maxDate : false);
            scope.$watch('minDate', function(newValue, oldValue) {
                //element.pickadate('picker').set('min', newValue ? newValue : false);
                $(element).datepicker({minDate: newValue ? newValue : false});
            }, true);
            scope.$watch('maxDate', function(newValue, oldValue) {
                //element.pickadate('picker').set('max', newValue ? newValue : false);
                $(element).datepicker({maxDate: newValue ? newValue : false});
            }, true);
        }
    };

  });
 });

使用指令的Html代码是

 <input type='text' data-ng-model='startDate' class="datepicker datepickerStart" placeholder="dd-mm-yy" id="startDate" data-ng-date='' name="startDate" lower-than="{{endDate}}"  max-date="endDate" readonly='readonly'>

 <input type='text' data-ng-model='endDate' class="datepicker datepickerStart" placeholder="dd-mm-yy" id="endDate" data-ng-date=''  name="endDate" min-date="startDate" readonly='readonly'  >

但它会出现以下错误

TypeError:无法读取属性&#39; apply&#39;未定义的     在HTMLInputElement。

0 个答案:

没有答案