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 .我也在 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) {如果 (!newVal) 返回；if (Date.parse(newVal) < Date.parse($scope.messagesForm.dateFrom)) {$scope.messagesForm.dateFrom = newVal;}});指令:
.directive('datepicker', function() {返回 {限制:'A'，要求:'ngModel'，链接:函数(范围、元素、属性、ngModelCtrl){$(函数(){element.datepicker({日期格式:'mm/dd/yy',显示状态:真，showWeeks: 真,亮点周:真实，最大日期:0，月数:1，showAnim: "缩放",showOptions: { origin: ["bottom", "right"] },onSelect:函数(日期){if (this.id === "MessageDateFrom") {$("#MessageDateTo").datepicker("option", "minDate", date);} else if (this.id === "MessageDateTo") {$("#MessageDateFrom").datepicker("option", "maxDate", date);}ngModelCtrl.$setViewValue(date);范围.$应用()；}});});}}});
HTML:
<input type="text" id="MessageDateFrom" class="form-control date" ng-model="messagesForm.dateFrom" datepicker readonly="readonly"/><div class="form-group"><input type="text" id="MessageDateTo" class="form-control date" ng-model="messagesForm.dateTo" datepicker readonly="readonly"/>
我尝试过的失败的 JQuery:
$(document).ready(function() {$("MessageDateTo").datepicker("option","minDate",$("MessageDateFrom").val());};有什么想法吗?
谢谢！
无需担心控制器何时加载或添加这两个属性minDate &maxDate 有限制，例如 minDate:"-30d",maxDate: 0,
您还可以从指令属性动态放置 minDate 和 maxDate 值.
指令
app.directive('datepicker', function() {返回 {限制:'A'，要求:'ngModel'，链接:函数(范围、元素、属性、ngModelCtrl){$(函数(){element.datepicker({日期格式:'mm/dd/yy',显示状态:真，showWeeks: 真,亮点周:真实，minDate:"-30d",//这里我做了逻辑-30dmaxDate: 0,//今天是最大日期月数:1，showAnim: "缩放",showOptions: { origin: ["bottom", "right"] },onSelect:函数(日期){ngModelCtrl.$setViewValue(date);范围.$应用()；}});});}}});更新
对不起，我的错误假设，如果你真的关心何时加载数据或分配日期变量在那个时候 jquery ui datepicker 应该绑定到它们，那么我更喜欢使用attrs.$observe 每当您的属性表达式被评估时都会被调用.为了使它工作，我确实添加了一个属性名称 loaded="{{messagesForm.dateFrom}}" &loaded="{{messagesForm.dateTo}}" 在页面上，因此每当将值分配给 dateFrom 和 dateTo 时，相应的日期选择器将分配给它们的元素
指令
app.directive('datepicker', function() {返回 {限制:'A'，要求:'ngModel'，链接:函数(范围、元素、属性、ngModelCtrl){//当 `{{}}` 值求值时被调用attrs.$observe('loaded',function(val){element.datepicker({日期格式:'mm/dd/yy',显示状态:真，showWeeks: 真,亮点周:真实，最大日期:0，月数:1，showAnim: "缩放",showOptions: { origin: ["bottom", "right"] },onSelect:函数(日期){if (this.id === "MessageDateFrom") {$("#MessageDateTo").datepicker("option", "minDate", date);} else if (this.id === "MessageDateTo") {$("#MessageDateFrom").datepicker("option", "maxDate", date);}ngModelCtrl.$setViewValue(date);范围.$应用()；}});})}}});更新的 Plunkr 演示了范围的设置值5 秒后的变量.
希望能帮到你，谢谢.
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.
Within controller:
$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:
.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>
Failing JQuery I've attempted:
$(document).ready(function() {
$("MessageDateTo").datepicker("option","minDate",$("MessageDateFrom").val());
};
Any ideas?
Thanks!
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,
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();
}
});
});
}
}
});
Update
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
Directive
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();
}
});
})
}
}
});
Updated Plunkr with demonstration of setting value of scope variables after 5 sec.
Hope this could help you, Thanks.
这篇关于Angular JQuery Datepicker 未在加载时设置 MinDate的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
