我在 AngularJS 项目中的 Date From 和 Date To 字段上使用 JQuery UI 的 Datepicker。我添加了将值绑定(bind)到模型值的指令,并且还添加了对 OnSelect 的检查,为每个字段设置 minDate 和 maxDate 选项(因此 Date To 永远不会早于 Date From)。问题是,在加载页面时,实际上没有选择任何日期(即使模型具有值),因此仍然可以选择早于日期开始的日期。我添加了一个 $watch 服务来至少纠正错误,但我仍然不知道如何在指令内或 Controller 内设置加载时的 minDate 。我还在 Angular 代码之外尝试过 $(document).ready,但这也不起作用。这是我在添加任何内容来设置 minDate 之前的代码。
在 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('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:
$(document).ready(function() {
$("MessageDateTo").datepicker("option","minDate",$("MessageDateFrom").val());
};
有什么想法吗?
谢谢!
最佳答案
无需担心 Controller 何时加载或只需添加这两个属性 minDate & maxDate有限制,如 minDate:"-30d",maxDate: 0,
您还可以从指令属性动态放置 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();
}
});
});
}
}
});
<强> Working Plunkr
更新
抱歉我的错误假设,如果您确实关心何时加载数据或分配日期变量,那么 jquery ui datepicker
应该绑定(bind)到它们,那么我更愿意使用attrs.$observe
每当你的属性表达式被求值时,它就会被调用。为了使其正常工作,我在页面上添加了一个属性名称 loaded="{{messagesForm.dateFrom}}"
和 loaded="{{messagesForm.dateTo}}"
因此,每当将值分配给 dateFrom 和 dateTo 时,相应的日期选择器就会分配给它们的元素
指令
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演示 5 秒后范围变量的设置值。
希望对您有帮助,谢谢。
关于javascript - Angular JQuery Datepicker 未在加载时设置 MinDate,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28749331/