Jquery datepicker 根据第一个日期字段中的选定日期限制第二个日期字段中的日期
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16373734/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery datepicker restrict dates in second date field based on selected date in first date field
提问by J?cob
I am using Jquery date picker and I have the following code where when user selects a date, the field below is populated with date +1
我正在使用 Jquery 日期选择器，我有以下代码，当用户选择日期时，下面的字段填充日期 +1
$('#dt2').datepicker({
dateFormat: "dd-M-yy"
});
$("#dt1").datepicker(
{dateFormat: "dd-M-yy",
minDate: 0,
onSelect: function(date){
var date2 = $('#dt1').datepicker('getDate');
date2.setDate(date2.getDate()+1);
$('#dt2').datepicker('setDate', date2);
I would like to restrict dates in dt2field which should not be below the date in dt1field. E.g. If date selected in dt1is 01-May-2013, then user is allowed to pick date after 01-May-2013, not less than 02-May-2013
我想限制dt2字段中的日期不应低于dt1字段中的日期。例如，如果选择的日期dt1是01-May-2013，则允许用户选择之后的日期01-May-2013，不小于02-May-2013
How can I restrict date picking in date field 2?
如何限制日期字段 2 中的日期选择？
回答by SirDerpington
I created a jsfiddle for you.
I'm not a 100% sure if it's "foolproof" but to prevent users from manually typing a date you could set the inputs to readonlye.g.
我为你创建了一个 jsfiddle。我不是 100% 确定它是否“万无一失”，但为了防止用户手动输入日期，您可以将输入设置为readonly例如
<input type="text" id="dt1" readonly="readonly">
At the moment I check the dt2 onClose and if its date is below dt1s date I correct it. Also if a date is selected in dt1 the minDateof dt2 is set to dt1 date +1.
目前我检查 dt2 onClose，如果它的日期低于 dt1s 日期，我会更正它。此外，如果在 dt1 中选择了日期，则dt2的minDate将设置为 dt1 日期 +1。
$(document).ready(function () {
$("#dt1").datepicker({
dateFormat: "dd-M-yy",
minDate: 0,
onSelect: function (date) {
var date2 = $('#dt1').datepicker('getDate');
date2.setDate(date2.getDate() + 1);
$('#dt2').datepicker('setDate', date2);
//sets minDate to dt1 date + 1
$('#dt2').datepicker('option', 'minDate', date2);
}
});
$('#dt2').datepicker({
dateFormat: "dd-M-yy",
onClose: function () {
var dt1 = $('#dt1').datepicker('getDate');
var dt2 = $('#dt2').datepicker('getDate');
//check to prevent a user from entering a date below date of dt1
if (dt2 <= dt1) {
var minDate = $('#dt2').datepicker('option', 'minDate');
$('#dt2').datepicker('setDate', minDate);
}
}
});
});
See the jsfiddle
查看jsfiddle
回答by SachinGutte
Here's how i do it --
这是我的做法——
And the code is as follows
代码如下
$('#dt2').datepicker({
dateFormat: "dd-M-yy"
});
$("#dt1").datepicker({
dateFormat: "dd-M-yy",
minDate: 0,
onSelect: function(date){
var date1 = $('#dt1').datepicker('getDate');
var date = new Date( Date.parse( date1 ) );
date.setDate( date.getDate() + 1 );
var newDate = date.toDateString();
newDate = new Date( Date.parse( newDate ) );
$('#dt2').datepicker("option","minDate",newDate);
}
});
回答by kannan
i just changed your code, so that min date for date2 set automatically & if date1 is greater than date2, it set date2=date1
我刚刚更改了您的代码，以便自动设置 date2 的最小日期，如果 date1 大于 date2，则设置 date2=date1
$("#dt1").datepicker({
dateFormat: "dd/mm/yy",
onSelect: function (date) {
var dt1 = $('#dt1').datepicker('getDate');
var dt2 = $('#dt2').datepicker('getDate');
if (dt1 > dt2) {
$('#dt2').datepicker('setDate', dt1);
}
$('#dt2').datepicker('option', 'minDate', dt1);
}
});
$('#dt2').datepicker({
dateFormat: "dd/mm/yy",
minDate: $('#dt1').datepicker('getDate'),
onClose: function () {
var dt1 = $('#dt1').datepicker('getDate');
var dt2 = $('#dt2').datepicker('getDate');
//check to prevent a user from entering a date below date of dt1
if (dt2 <= dt1) {
var minDate = $('#dt2').datepicker('option', 'minDate');
$('#dt2').datepicker('setDate', minDate);
}
}
});
