Angular JQuery日期选择器未在加载时设置MinDate
Angular JQuery Datepicker Not Setting MinDate on Load
我在AngularJS项目中的Date From和Date To字段上使用JQuery UI的Datepicker。我添加了将值绑定到模型值的指令,还添加了对OnSelect的检查,为每个字段设置minDate和maxDate选项(因此Date to永远不会早于Date From)。问题是,在加载页面时,实际上没有选择日期(即使模型有一个值),因此仍然可以选择早于"开始日期"的"截止日期"。我添加了一个$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:
<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());
};
有什么想法吗?
谢谢!
无需担心控制器何时加载,也无需担心添加这两个属性(即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();
}
});
});
}
}
});
工作Plunkr
更新
很抱歉我的错误假设,如果你真的关心数据何时加载或日期变量何时分配,那么jquery ui datepicker
应该绑定到它们,那么我更喜欢使用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();
}
});
})
}
}
});
更新Plunkr,演示5秒后范围变量的设置值。
希望这能帮到你,谢谢。
更新$timeout
中的minDate
和maxDate
。
$timeout
将确保呈现该指令。
这是更新后的plunker。http://plnkr.co/edit/2ucTcwKFPFpgxoJiRB3f?p=preview
- 内容安全策略:页面's设置阻止加载资源
- 如何在页面加载时设置函数的条件
- 对插件初始化后动态加载的元素进行样式设置
- 任何人都知道IE7设置或更新/补丁,它可以防止IE因为jquery错误而无法加载页面
- 为什么页面重新加载会使设置超时无效,以及如何避免
- VBScript在加载时设置值
- 如何在页面加载angular js上设置从ajax调用中选择的选项
- 如何在onclick事件执行代码时在ImageButton上设置加载gif
- Highcharts如何显示在设置数据时加载动画
- 在地图加载/页面加载时,我想将地图设置为当前地理位置,但不想在地图上显示定位图标
- href属性在页面加载后拒绝重新设置
- 无法获取表单's面板的x和y坐标,并在加载时从cookie中设置它们
- Jquery数组-设置和加载值
- 如何在使用javascript加载页面时直接设置对象参数
- 即使在 DOM 加载后也无法设置 null 的 .innerHTML
- Chrome 扩展程序会等待设置加载到事件处理程序中
- 如何设置页面之间过渡的加载图标
- 使用Select2远程加载设置默认选项
- SVG 动画在加载设置超时时不会启动
- 我如何在$script.js库中为文件加载设置http requesttheader ?