如何动态设置AngularJS的属性jQueryUI datepicker指令

我需要将datepicker输入的最小日期设置为今天日期之后的5天。我已经为AngularJS设置了jQueryUI的datepicker指令，并且它本身很好。当我尝试为单个日期选择器的输入添加任何属性（如'min'（Date））时，它看起来并不尊重该属性，并向我显示所有日期。如何动态设置AngularJS的属性jQueryUI datepicker指令

对不起，不具有的jsfiddle或plunker

编辑：更新，以显示解决方案

的index.html

<input id="requestDate" type="text" ng-model="requestDate" ss-datepicker min-date="5"/>

Datepicker.js

app.directive('ssDatepicker', function(){ 
    return { 
     restrict: 'A', 
     require: 'ngModel', 
     link: function(scope, element, attrs, ngModelCtrl){ 
      $(function(){ 
       element.datepicker({ 
        dateFormat:'dd-M-yy', 
        showOn: 'both', 
        buttonImage: "/e/images/calendar-ui.gif", 
        buttonImageOnly: true, 
        buttonText:'Choose a Date', 
     beforeShow: function(element, datepicker){ 
      if(attrs.minDate){ 
          angular.element(element).datepicker("option", "minDate", attrs.minDate); 
      } 
      if(attrs.maxDate){ 
          angular.element(element).datepicker("option", "maxDate", attrs.maxDate); 
      } 
     }, 
        onSelect:function(date){ 
         scope.$apply(function(){ 
          ngModelCtrl.$setViewValue(date); 
         }); 
        } 
       }); 
      }); 
     } 
    } 
});

提前感谢！

来源

2013-12-09 BillF

好了，感谢塞巴斯蒂安，我能弄明白。由于某种原因，它并不像“min-date”属性的日期变量那样，但它会接受偏移量，这对我而言完全按照需要工作。我相当确信这是一个格式问题，它阻止了它的工作日期。

app.directive('ssDatepicker', function(){ 
      return { 
       restrict: 'A', 
       require: 'ngModel', 
       link: function(scope, element, attrs, ngModelCtrl){ 
        $(function(){ 
         element.datepicker({ 
          dateFormat:'dd-M-yy', 
          showOn: 'both', 
          buttonImage: "/e/images/calendar-ui.gif", 
          buttonImageOnly: true, 
          buttonText:'Choose a Date', 
          beforeShow: function(element, datepicker){ 
           if(attrs.minDate){ 
            angular.element(element).datepicker("option", "minDate", attrs.minDate); 
           } 
           if(attrs.maxDate){ 
            angular.element(element).datepicker("option", "maxDate", attrs.maxDate); 
           } 
          }, 
          onSelect:function(date){ 
           scope.$apply(function(){ 
            ngModelCtrl.$setViewValue(date); 
           }); 
          } 
         }); 
        }); 
       } 
      } 
     });

来源

2013-12-10 13:23:36 BillF

你觉得“min”值应该会导致一些变化吗？

您的指令不读取此值，是吗？

您可以通过链接函数中的attrs.min访问它。

你有一些关于你在做什么的文档。我找不到东西，看起来像你的代码。

哦 - 你没有使用Angular UI Bootstrap Datepicker，而是使用jQuery UI Datepicker。

所以，你必须设置这个值：http://api.jqueryui.com/datepicker/#option-minDate

... 
dateFormat:'dd-M-yy', 
showOn: 'both', 
buttonImage: "/e/images/calendar-ui.gif", 
buttonImageOnly: true, 
buttonText:'Choose a Date', 
minDate: attrs.min, // get the value of the "min" attribute - maybe you should take care that it is really a date 
...

就像：http://plnkr.co/edit/MyduNfrchgsuD9mAYOEU?p=preview

来源

2013-12-10 00:13:05

感谢您的回复。我试过添加attrs.min，但它似乎也不起作用。我更新了原来的帖子，并提供了您所建议的更改（如果我错过了某些内容，请让我知道）。此外，该指令是从这个博客创建的：http：//www.abequar.net/jquery-ui-datepicker-with-angularjs/ – BillF

只需将'minDate'放在同一级别als'showOn'，'dateFormat' Plunkr分叉的链接中的一个： http://plnkr.co/edit/MyduNfrchgsuD9mAYOEU?p=preview –

如何动态设置AngularJS的属性jQueryUI datepicker指令

回答

相关问题