jQuery UI在基于开始日期的范围内选择开始和结束日期 [英] jQuery UI Picking a start and end date within range based on start date
问题描述
我正在jQuery ui中构建一个日期选择器.我想做的是设置一个范围,因此当他们选择第一个日期时,第二个日期就会出现,并提供30天的窗口.我尝试了此操作,但是它不起作用(它允许用户选择从今天起30天,而不是从开始日期起30天):
I'm building a date picker in jQuery ui. What I'm trying to do is set a range, so when they pick the first date the second date appears and gives a 30 day window. I tried this but it doesn't work (it lets the user pick 30 days from today, not 30 from the start date):
var pickDate;
$( "#datepickerEnd" ).hide();
$( "#datepickerStart" ).datepicker();
$( "#datepickerStart" ).change(function(){
var pickDate = $( "#datepickerStart" ).val();
$( "#datepickerEnd" ).datepicker({ minDate: pickDate, maxDate: +30 });
$( "#datepickerEnd" ).show();
})
我遇到的另一个问题是,当我更改datepickerStart时,它只会设置一次开始范围,而不是每次更改时都设置一次.我必须刷新页面才能锁定新的开始日期.
Another issue I ran into is when I change datepickerStart it'll only set the start range once but not every time I change it. I have to refresh the page to lock in a new start date.
推荐答案
选中此 jsfiddle .这是您的问题的有效示例.
Check this jsfiddle here. It's a working example of your problem.
HTML
<input type="text" id="dt1">
<input type="text" id="dt2">
JS
$(document).ready(function () {
$("#dt1").datepicker({
dateFormat: "dd-M-yy",
minDate: 0,
onSelect: function () {
var dt2 = $('#dt2');
var startDate = $(this).datepicker('getDate');
//add 30 days to selected date
startDate.setDate(startDate.getDate() + 30);
var minDate = $(this).datepicker('getDate');
var dt2Date = dt2.datepicker('getDate');
//difference in days. 86400 seconds in day, 1000 ms in second
var dateDiff = (dt2Date - minDate)/(86400 * 1000);
//dt2 not set or dt1 date is greater than dt2 date
if (dt2Date == null || dateDiff < 0) {
dt2.datepicker('setDate', minDate);
}
//dt1 date is 30 days under dt2 date
else if (dateDiff > 30){
dt2.datepicker('setDate', startDate);
}
//sets dt2 maxDate to the last day of 30 days window
dt2.datepicker('option', 'maxDate', startDate);
//first day which can be selected in dt2 is selected date in dt1
dt2.datepicker('option', 'minDate', minDate);
}
});
$('#dt2').datepicker({
dateFormat: "dd-M-yy",
minDate: 0
});
});
正如soderslatt所述,请使用 onSelect 选项设置日期. 我使用的其他方法是:
As soderslatt already mentioned use the onSelect option to set the dates. Other methods I used are:
- getDate
- setDate
- minDate
- maxDate
我认为它们都很容易解释,文档可以帮助您了解它们的工作原理. 如果要将第二个日期选择器的日期设置为dt1的日期+ 1天,请执行以下操作:
I think they're all very self explanatory and the documentation helps you to understand how they work. If you want to set the date of the second datepicker to dt1's date + 1 day do the same as in this line:
startDate.setDate(startDate.getDate() + 30);
但是当然要增加1天而不是30天.
But of course add 1 day and not 30.
这篇关于jQuery UI在基于开始日期的范围内选择开始和结束日期的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!