无法限制AngularJS中jQuery DateTimePicker的日期范围
我正在使用我的AngularJS应用程序。我正在使用AngularJS中的指令实现插件。我的问题是，我无法找到一种方法来设置弹出的日期/时间选择器的上限和下限 看看，让我知道我做错了什么 相关代码：无法限制AngularJS中jQuery DateTimePicker的日期范围,jquery,angularjs,datetimepicker,Jquery,Angularjs,Datetimepicker,我正在使用我的AngularJS应用程序。我正在使用AngularJS中的指令实现插件。我的问题是，我无法找到一种方法来设置弹出的日期/时间选择器的上限和下限 看看，让我知道我做错了什么 相关代码： var updateDateTime = function(dateLower, dateUpper) { if(!dateLower || !dateUpper) { return; } else if(!dateLower.val() || !date
var updateDateTime = function(dateLower, dateUpper)
{
if(!dateLower || !dateUpper)
{
return;
}
else if(!dateLower.val() || !dateUpper.val())
return;
else
{
if(dateUpper.val())
{
var dateStringUpper = dateUpper.val().split(' ');
var maxDate = dateStringUpper[0] + ' ' + dateStringUpper[1] + ' ' + dateStringUpper[2];
var maxTime = dateStringUpper[4] + ' ' + dateStringUpper[5];
dateLower.setOptions({
maxDate: maxDate,
maxTime: maxTime
});
}
if(dateLower.val())
{
var dateStringLower = dateLower.val().split(' ');
var minDate = dateStringLower[0] + ' ' + dateStringLower[1] + ' ' + dateStringLower[2];
var minTime = dateStringLower[4] + ' ' + dateStringLower[5];
dateUpper.setOptions({
minDate: minDate,
minTime: minTime
});
}
}
};
myApp.directive("ngDatetimestart", function($timeout) {
return {
require: 'ngModel',
restrict: 'A',
link: function(scope, elem, attrs, ngModel) {
$timeout(function() {
$(elem).datetimepicker({
format: 'F j, Y @ g:i A',
formatDate: 'F j, Y',
formatTime: 'g:i A',
timepicker: true,
lang: 'en',
onShow: updateDateTime($(elem), $('#end_date_text')),
onChangeDateTime: updateDateTime($(elem), $('#end_date_text'))
});
}, 0);
}
};
});
myApp.directive("ngDatetimeend", function($timeout) {
return {
require: 'ngModel',
restrict: 'A',
link: function(scope, elem, attrs, ngModel) {
$timeout(function() {
$(elem).datetimepicker({
format: 'F j, Y @ g:i A',
formatDate: 'F j, Y',
formatTime: 'g:i A',
timepicker: true,
lang: 'en',
onShow: updateDateTime($('#start_date_text'), $(elem)),
onChangeDateTime: updateDateTime($('#start_date_text'), $(elem))
});
}, 0);
}
};
});
myApp.directive("ngDatetimestart", function($timeout) {
return {
require: 'ngModel',
restrict: 'A',
link: function(scope, elem, attrs, ngModel) {
$timeout(function() {
$(elem).datetimepicker({
format: 'F j, Y @ g:i A',
formatDate: 'F j, Y',
formatTime: 'g:i A',
timepicker: true,
lang: 'en',
onShow: function(ct) {
this.setOptions({
maxDate: $("#end_date_text").val() ? new Date(Date.parse($("#end_date_text").val())) : false
});
}
});
}, 0);
}
};
});
myApp.directive("ngDatetimeend", function($timeout) {
return {
require: 'ngModel',
restrict: 'A',
link: function(scope, elem, attrs, ngModel) {
$timeout(function() {
$(elem).datetimepicker({
format: 'F j, Y @ g:i A',
formatDate: 'F j, Y',
formatTime: 'g:i A',
timepicker: true,
lang: 'en',
onShow: function(ct) {
this.setOptions({
minDate: $("#start_date_text").val() ? new Date(Date.parse($("#start_date_text").val())) : false
});
}
});
}, 0);
}
};
});
谢谢 datetimepicker的人在他们的文档中有一个很好的例子： 您必须特别小心onShow逻辑中“this”的确切解析，并确保正确解析datetime输入字段的文本 您的代码中有一些内容缺失或错误，但我已经对您的代码进行了一些清理，并提供了一个可用的演示： 有关守则：
var updateDateTime = function(dateLower, dateUpper)
{
if(!dateLower || !dateUpper)
{
return;
}
else if(!dateLower.val() || !dateUpper.val())
return;
else
{
if(dateUpper.val())
{
var dateStringUpper = dateUpper.val().split(' ');
var maxDate = dateStringUpper[0] + ' ' + dateStringUpper[1] + ' ' + dateStringUpper[2];
var maxTime = dateStringUpper[4] + ' ' + dateStringUpper[5];
dateLower.setOptions({
maxDate: maxDate,
maxTime: maxTime
});
}
if(dateLower.val())
{
var dateStringLower = dateLower.val().split(' ');
var minDate = dateStringLower[0] + ' ' + dateStringLower[1] + ' ' + dateStringLower[2];
var minTime = dateStringLower[4] + ' ' + dateStringLower[5];
dateUpper.setOptions({
minDate: minDate,
minTime: minTime
});
}
}
};
myApp.directive("ngDatetimestart", function($timeout) {
return {
require: 'ngModel',
restrict: 'A',
link: function(scope, elem, attrs, ngModel) {
$timeout(function() {
$(elem).datetimepicker({
format: 'F j, Y @ g:i A',
formatDate: 'F j, Y',
formatTime: 'g:i A',
timepicker: true,
lang: 'en',
onShow: updateDateTime($(elem), $('#end_date_text')),
onChangeDateTime: updateDateTime($(elem), $('#end_date_text'))
});
}, 0);
}
};
});
myApp.directive("ngDatetimeend", function($timeout) {
return {
require: 'ngModel',
restrict: 'A',
link: function(scope, elem, attrs, ngModel) {
$timeout(function() {
$(elem).datetimepicker({
format: 'F j, Y @ g:i A',
formatDate: 'F j, Y',
formatTime: 'g:i A',
timepicker: true,
lang: 'en',
onShow: updateDateTime($('#start_date_text'), $(elem)),
onChangeDateTime: updateDateTime($('#start_date_text'), $(elem))
});
}, 0);
}
};
});
myApp.directive("ngDatetimestart", function($timeout) {
return {
require: 'ngModel',
restrict: 'A',
link: function(scope, elem, attrs, ngModel) {
$timeout(function() {
$(elem).datetimepicker({
format: 'F j, Y @ g:i A',
formatDate: 'F j, Y',
formatTime: 'g:i A',
timepicker: true,
lang: 'en',
onShow: function(ct) {
this.setOptions({
maxDate: $("#end_date_text").val() ? new Date(Date.parse($("#end_date_text").val())) : false
});
}
});
}, 0);
}
};
});
myApp.directive("ngDatetimeend", function($timeout) {
return {
require: 'ngModel',
restrict: 'A',
link: function(scope, elem, attrs, ngModel) {
$timeout(function() {
$(elem).datetimepicker({
format: 'F j, Y @ g:i A',
formatDate: 'F j, Y',
formatTime: 'g:i A',
timepicker: true,
lang: 'en',
onShow: function(ct) {
this.setOptions({
minDate: $("#start_date_text").val() ? new Date(Date.parse($("#start_date_text").val())) : false
});
}
});
}, 0);
}
};
});
这个很好用，谢谢！我也尝试过限制时间（如果日期相同的话），但无法让它发挥作用。如果我试图使指令更加“独立”，我也无法实现这一点。如果表单中有两组开始和结束日期时间框，该怎么办。我将如何处理这些问题？对于开始和结束时间，请使用minTime和maxTime。我真的不知道你说的“独立”是什么意思。如果你想要多个集合，你只需要以某种方式指定不同的选择器。在将其作为AngularJS的指令添加之前，我已经按照我的意愿进行了工作-因此我知道maxTime和minTime（我已经阅读了文档）。我只是对JavaScript不是很熟练，我不会想到使用类似于
Date（Date.parse（$（“#end_Date_text”）.val（））