Angular JQuery Datepicker在加载时未设置MinDate [英] Angular JQuery Datepicker Not Setting MinDate on Load
问题描述
我在AngularJS项目的Date From和Date To字段中使用JQuery UI的Datepicker。我已经添加了将值绑定到模型值的指令，并且我还向OnSelect添加了一个检查，它为每个字段设置minDate和maxDate选项（因此Date To从不早于Date From）。问题是，在加载页面时，实际上没有选择任何日期（即使模型具有值），因此仍然可以选择早于Date From的To日期。我添加了一个$ watch服务来至少纠正错误，但是我仍然无法弄清楚如何在指令或控制器内部加载minDate。我也尝试过$（document）。在Angular代码之外，但是这也不行。在添加任何东西以设置minDate之前，这是我的代码。
I'm using JQuery UI's Datepicker on Date From and Date To fields in an AngularJS project. I've added the directive to bind the value to the model value, and I've also added a check to OnSelect that sets the minDate and maxDate options for each field (so the Date To is never earlier than the Date From). The problem is that, on loading the page, no date has actually been selected (even though the model has a value), so it is still possible to select a To date earlier than the Date From. I added a $watch service to at least correct the error, but I still can't figure out how to set the minDate on load either within the directive or inside the controller. I've also tried $(document).ready outside of the Angular code, but that isn't working either. Here's my code prior to adding anything to set the 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：
<div class="form-group">
<input type="text" id="MessageDateFrom" class="form-control dates" ng-model="messagesForm.dateFrom" datepicker readonly="readonly" />
</div>
<div class="form-group">
<input type="text" id="MessageDateTo" class="form-control dates" ng-model="messagesForm.dateTo" datepicker readonly="readonly" />
</div>
失败的JQuery我尝试了：
Failing JQuery I've attempted:
$(document).ready(function() {
$("MessageDateTo").datepicker("option","minDate",$("MessageDateFrom").val());
};
任何想法？
谢谢！
推荐答案
无需担心控制器加载时或什么只是添加这两个属性 分钟日期 & maxDate ，限制像 minDate： - 30d， maxDate：0，
No need to worries about when controller loads or what just add this two property which is minDate & maxDate with there limit like minDate:"-30d",maxDate: 0,
您还可以从指令属性动态放置minDate和maxDate值。
You also can place minDate and maxDate values dynamically from directive property.
指令
Directive
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();
}
});
});
}
}
});
Working Plunkr
更新
Update
对于我错误的假设，如果您真的关心每当数据加载或日期变量分配时， jquery ui datepicker 应该绑定对于他们，那么我更喜欢使用 attrs。$ observe ，每当你的属性表达式被评估时，它将会被调用。为了使它工作，我添加了一个属性名称 loaded ={{messagesForm.dateFrom}}& loaded ={{messagesForm.dateTo}}，所以每当值被分配到dateFrom和dateTo相应的datepicker将分配给他们的元素
Sorry for my wrong assumption, If you really do care about whenever the data gets loaded or date variable are assigned at that time jquery ui datepicker should bind to them, then I'll prefer to use attrs.$observe which will gets call whenever your attribute expression gets evaluated. For make it working I did added one attribute name loaded="{{messagesForm.dateFrom}}" & loaded="{{messagesForm.dateTo}}" on the page so whenever the value gets assigned to dateFrom and dateTo the respective datepicker will get assign to their elements
指令
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秒后设置范围变量的值。
Updated Plunkr with demonstration of setting value of scope variables after 5 sec.
希望这可以帮助你，谢谢。
Hope this could help you, Thanks.
这篇关于Angular JQuery Datepicker在加载时未设置MinDate的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
