jQuery UI 日期选择器范围
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3827425/
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 Range
提问by Andrew
I asked a pretty similar questiona few days ago, but this one is different enough that I didn't feel like derailing the other helpful topic. I basically want to set up two text input fields and hook them both up with jQuery UI's Datepicker to have them act as a range... I want the second input field start date to be contingent upon what you've selected in the first input field. For instance if I select 10-25-2010 for the first field, then the earliest day you can select in the second field should be 10-26-2010. Any help or direction on this topic would be greatly appreciated!
几天前我问了一个非常相似的问题，但这个问题足够不同，我不想破坏另一个有用的话题。我基本上想设置两个文本输入字段并将它们都与 jQuery UI 的 Datepicker 连接起来，让它们充当一个范围......我希望第二个输入字段的开始日期取决于您在第一个输入中选择的内容场地。例如，如果我为第一个字段选择 10-25-2010，那么您可以在第二个字段中选择的最早日期应该是 10-26-2010。任何有关此主题的帮助或指导将不胜感激！
回答by Reigel
$(function() {
$('#txtStartDate, #txtEndDate').datepicker({
showOn: "both",
beforeShow: customRange,
dateFormat: "dd M yy",
});
});
function customRange(input) {
if (input.id == 'txtEndDate') {
var minDate = new Date($('#txtStartDate').val());
minDate.setDate(minDate.getDate() + 1)
return {
minDate: minDate
};
}
}?
crazy demo
疯狂的演示
回答by jinglesthula
The jQuery UI datepicker documentation itself provides a nice example of how to link two datepickers to ensure valid date ranges.
jQuery UI 日期选择器文档本身提供了一个很好的示例，说明如何链接两个日期选择器以确保有效的日期范围。
See the example here: http://jqueryui.com/datepicker/#date-range
请参阅此处的示例：http: //jqueryui.com/datepicker/#date-range
No extra plugin is needed, although if you wanted to create a simple one that would take the ids of the start and end date fields and plug in the necessary bits to the code hunk they give in the docs it would be pretty simple.
不需要额外的插件，尽管如果您想创建一个简单的插件，该插件将获取开始和结束日期字段的 id 并将必要的位插入他们在文档中提供的代码块中，这将非常简单。
回答by Alpesh
$('#firstinputfield').datepicker({
//your other configurations.
onSelect: function(){
var start = $('#firstinputfield').val();
var days = parseInt('1');
var date = new Date(start);
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var edate= new Date(y, m, d+days);
$('#secondinputfield').datepicker({
//Your other configurations.
minDate:edate
});
}
});
回答by sieppl
onSelect: function(dateText, inst) {
try {
var date = $.datepicker.parseDate("dd/mm/yy", dateText);
if (date) {
date.setDate(date.getDate() + 1);
$("#secondDatePicker").datepicker("setDate", date);
}
}
catch(e) {}
}
