Angular JQuery Datepicker未在加载时设置MinDate

我在AngularJS项目的Date From和Date To字段中使用JQuery UI的Datepicker。 我添加了指令将值绑定到模型值，我还添加了一个OnSelect检查，为每个字段设置minDate和maxDate选项（因此Date To永远不会早于Date From）。 问题是，在加载页面时，实际上没有选择任何日期（即使模型有值），因此仍然可以选择比日期更早的To日期。 我添加了一个$ watch服务来至少纠正错误，但我仍然无法弄清楚如何在指令内或控制器内部设置minDate。 我也尝试过在Angular代码之外的$（document）.ready，但这也不起作用。 在添加任何内容以设置minDate之前，这是我的代码。

在控制器内：

$scope.messagesForm.dateFrom = moment().subtract('days', 30).format('MM/DD/YYYY'); $scope.messagesForm.dateTo = moment().format('MM/DD/YYYY'); $scope.$watch('messagesForm.dateTo', function(newVal, oldVal) { if (!newVal) return; if (Date.parse(newVal) < Date.parse($scope.messagesForm.dateFrom)) { $scope.messagesForm.dateFrom = newVal; } }); 

指示：

 .directive('datepicker', function() { return { restrict: 'A', require : 'ngModel', link : function (scope, element, attrs, ngModelCtrl) { $(function(){ element.datepicker({ dateFormat: 'mm/dd/yy', showStatus: true, showWeeks: true, highlightWeek: true, maxDate: 0, numberOfMonths: 1, showAnim: "scale", showOptions: { origin: ["bottom", "right"] }, onSelect: function (date) { if (this.id === "MessageDateFrom") { $("#MessageDateTo").datepicker("option", "minDate", date); } else if (this.id === "MessageDateTo") { $("#MessageDateFrom").datepicker("option", "maxDate", date); } ngModelCtrl.$setViewValue(date); scope.$apply(); } }); }); } } 

}）;

HTML：

失败的JQuery我试过：

 $(document).ready(function() { $("MessageDateTo").datepicker("option","minDate",$("MessageDateFrom").val()); }; 

有任何想法吗？

谢谢！

Answer 1

无需担心何时控制器加载或只是添加这两个属性minDate ＆ maxDate与minDate:"-30d",maxDate: 0,这样的限制minDate:"-30d",maxDate: 0,

您还可以从directive属性动态放置minDate和maxDate值。

指示

 app.directive('datepicker', function() { return { restrict: 'A', require : 'ngModel', link : function (scope, element, attrs, ngModelCtrl) { $(function(){ element.datepicker({ dateFormat: 'mm/dd/yy', showStatus: true, showWeeks: true, highlightWeek: true, minDate:"-30d", //here i did logic -30d maxDate: 0, //today is max date numberOfMonths: 1, showAnim: "scale", showOptions: { origin: ["bottom", "right"] }, onSelect: function (date) { ngModelCtrl.$setViewValue(date); scope.$apply(); } }); }); } } }); 

工作Plunkr

更新

抱歉我的错误假设，如果你真的关心加载数据或者当时分配了日期变量，那么jquery ui datepicker应该绑定到它们，那么我宁愿使用attrs.$observe当你的时候会调用它属性表达式得到评估。 为了使其工作，我在页面上添加了一个属性名称loaded="{{messagesForm.dateFrom}}" ＆ loaded="{{messagesForm.dateTo}}" ，因此每当将值分配给dateFrom和dateTo时，相应的datepicker将得到他们的元素

指示

  app.directive('datepicker', function() { return { restrict: 'A', require : 'ngModel', link : function (scope, element, attrs, ngModelCtrl) { //get called when `{{}}` value evaluated attrs.$observe('loaded',function(val){ element.datepicker({ dateFormat: 'mm/dd/yy', showStatus: true, showWeeks: true, highlightWeek: true, maxDate: 0, numberOfMonths: 1, showAnim: "scale", showOptions: { origin: ["bottom", "right"] }, onSelect: function (date) { if (this.id === "MessageDateFrom") { $("#MessageDateTo").datepicker("option", "minDate", date); } else if (this.id === "MessageDateTo") { $("#MessageDateFrom").datepicker("option", "maxDate", date); } ngModelCtrl.$setViewValue(date); scope.$apply(); } }); }) } } }); 

更新了Plunkr，并在5秒后显示了范围变量的设定值。

希望这可以帮助你，谢谢。

Answer 2

在$timeout更新minDate和maxDate 。

$timeout将确保呈现指令。

这是更新的plunker。 http://plnkr.co/edit/2ucTcwKFPFpgxoJiRB3f?p=preview