jQuery UI Datepicker - onSelect 获取所选日期+3天
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10530134/
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 UI Datepicker - onSelect get the selected date +3 days
提问by Merianos Nikos
I try to create a date range by using the jQuery UI datepicker, using two text fields. The first text field "start_date" will set the start date and the second text field "end_date" will set the end date.
我尝试通过使用 jQuery UI 日期选择器和两个文本字段来创建日期范围。第一个文本字段“start_date”将设置开始日期，第二个文本字段“end_date”将设置结束日期。
The code I have till now is this:
我到目前为止的代码是这样的：
$('#start_date').live(
'focus',
function()
{
$('#end_date').datepicker(
{
dateFormat: 'dd MM yy',
minDate: new Date(),
maxDate: new Date(2012, 9, 15),
stepMonths: 2,
numberOfMonths: 2
}
);
$(this).datepicker(
{
dateFormat: 'dd MM yy',
minDate: new Date(),
maxDate: new Date(2012, 9, 15),
stepMonths: 2,
numberOfMonths: 2,
onSelect: function(dateText, inst)
{
var instance = $( this ).data("datepicker");
var date = $.datepicker.parseDate(instance.settings.dateFormat, dateText, instance.settings);
$('#end_date').datepicker('option', 'minDate', dateText);
}
}
);
}
);
NOTE: I use the live and the focus event because all my page content is loaded with AJAX call. Maybe that is correct or wrong, but this is not what I like to ask here ;)
注意：我使用 live 和 focus 事件，因为我的所有页面内容都是通过 AJAX 调用加载的。也许这是正确的或错误的，但这不是我想在这里问的；)
The above code is correct for me and work fine, but what I like to do, is to setthe value of the 'end_date' element to selected one +3 days.
上面的代码对我来说是正确的并且工作正常，但我喜欢做的是将“end_date”元素的值设置为选定的一+3天。
Until now, when I choose a date at the "start_date" element the "end_date" element change to the same date as the "start_date", and this is what I like to change. The "end_date" to be +3 days from the "start_date" element adter the selection.
到现在为止，当我在“start_date”元素上选择一个日期时，“end_date”元素会更改为与“start_date”相同的日期，这就是我喜欢改变的。与“start_date”元素相距 3 天的“end_date”将添加到选择中。
How can I do that ?
我怎样才能做到这一点 ？
回答by Daya
To set end_date for +1 day
将 end_date 设置为 +1 天
onSelect: function(dateText, inst) {
$('#start_date').datepicker('option','minDate', new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay));
var toDate = new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay);//Date one month after selected date
var oneDay = new Date(toDate.getTime()+86400000);
document.getElementById('end_date').value =$.datepicker.formatDate('dd/mm/yy', oneDay);
}
回答by Tats_innit
Hiya demohttp://jsfiddle.net/96Lbf/
Hiya演示http://jsfiddle.net/96Lbf/
This demo will set totext box with +3 daystaking `from date selection into account.
此演示将设置to文本框并+3 days考虑到“从日期选择”。
jquery code
查询代码
$(function() {
$( "#from, #to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
onSelect: function( selectedDate ) {
if(this.id == 'from'){
var dateMin = $('#from').datepicker("getDate");
var rMin = new Date(dateMin.getFullYear(), dateMin.getMonth(),dateMin.getDate() + 1);
var rMax = new Date(dateMin.getFullYear(), dateMin.getMonth(),dateMin.getDate() + 3);
//$('#to').datepicker("option","minDate",rMin);
//$('#to').datepicker("option","maxDate",rMax);
$('#to').val($.datepicker.formatDate('mm-dd-yy', new Date(rMax)));
}
}
});
});
Html
html
<div class="demo">
<label for="from">From</label>
<input type="text" id="from" name="from"/>
<label for="to">to</label>
<input type="text" id="to" name="to"/>
</div>?
回答by Mc New
If month = 4, I want to see car1 picture. If month = 5, i want to see car3 picture. How can I do it?
如果月 = 4，我想看 car1 图片。如果月 = 5，我想看 car3 图片。我该怎么做？
//..............
onSelect: function( selectedDate ) {
if(this.id == 'from'){
var dateMin = $('#from').datepicker("getDate");
var rMin = new Date(dateMin.getFullYear(), dateMin.getMonth(),dateMin.getDate() + 0);
alert (rMin.getMonth());
if(rMin.getMonth() == 4){
var image1=new Image();
image1.src="car1.jpg"
if(rMin.getMonth() ==5){
var image2=new Image()
image2.src="car3.jpg";
}
}
}
}
<label for="from">From</label>
<input type="text" id="from" name="from"/>
<label for="pics">pics</label>
<input type="image"
src="car1.jpg"
id="pics"
name="pics"
alt="Submit"
width="48" height="48">
...............
