jQuery Datepicker - 根据以前的日历限制 minDate
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6018990/
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 - Limit minDate according to previous calendar
提问by Romin
I have 2 datepickers as following:
我有 2 个日期选择器，如下所示：
$(function() {
$( "#datepicker1, #datepicker2" ).datepicker({
minDate: 'today',
maxDate: "+90D",
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
dateFormat: "D, dd MM, yy"
});
});
I want datepicker2have the minimumdate value selected in the first calendar + 1 day.(i.e. if first calendar date was May 16th, 2nd calendar should have the min date set to May 17th)
我希望datepicker2在第一个日历 + 1 天中选择最小日期值。（即，如果第一个日历日期是 5 月 16 日，则第二个日历应将最小日期设置为 5 月 17 日）
回答by tobias86
I had the same scenario. What I did was to set the minDate value of the second datepicker in the "select" event handler of the first datepicker. Worked like a charm.
我有同样的场景。我所做的是在第一个日期选择器的“选择”事件处理程序中设置第二个日期选择器的 minDate 值。像魅力一样工作。
EDIT: Here is an example:
编辑：这是一个例子：
$("#datepicker1").datepicker({
//normal setup parameters here
onSelect: function (dateValue, inst) {
$("#datepicker2").datepicker("option", "minDate", dateValue)
}
});
回答by Jivan
Detailed answers here don't really answer the question, which was "how do I set the minDate of the second datepicker, on the value of the first datepicker + 1 DAY" ?
此处的详细答案并没有真正回答问题，即“如何将第二个日期选择器的 minDate 设置为第一个日期选择器 + 1 天的值”？
It might be too late for you but since I quite struggled to find a solution, here it is :
对你来说可能为时已晚，但由于我很难找到解决方案，这里是：
$(function() {
$( "#datepicker1" ).datepicker({
minDate: 'today',
maxDate: "+90D",
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
dateFormat: "D, dd MM, yy"
onClose: function(selectedDate, inst) {
var selected_date = new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay);
new_date = new Date(selected_date.getTime() + 86400000);
new_date = jQuery.datepicker.formatDate('dd/mm/yy', new_date);
$( "#datepicker2" ).datepicker( "option", "minDate", new_date);
}
});
});
Explanations :
说明：
You have to get a Date object from the datepicker1 field, with Year, Month, Day.
您必须从 datepicker1 字段中获取一个 Date 对象，其中包含年、月、日。
Then, you call this Date object and transform it into a UNIX Timestamp, to which you add 86400000 (number of microseconds in one day). Which gives you a new Date object.
然后，您调用此 Date 对象并将其转换为 UNIX 时间戳，向其中添加 86400000（一天中的微秒数）。这为您提供了一个新的 Date 对象。
After that, you format the Date object you just created to the correct display (which may not be the one presented in this answer), by calling formatDatemethod of jQuery DatePicker API.
之后，通过调用formatDatejQuery DatePicker API 的方法，将刚刚创建的 Date 对象格式化为正确的显示（可能不是本答案中提供的那个）。
In the end, you apply the minDate of your datepicker2 field with your new_date.
最后，您将 datepicker2 字段的 minDate 与 new_date 一起应用。
回答by Sulabh Singla
You must initialize both datepicker.
您必须初始化两个日期选择器。
$(document).ready(function(){
var dateToday=new Date();
$("#datepicker2").datepicker();
$("#datepicker1").datepicker({
minDate: dateToday,
onSelect:function(ui, event) { $('#datepicker2').datepicker("option","minDate",ui);}
});
});
回答by Kamal Pundir
Try this : works fine for me
试试这个：对我来说很好用
$("#datepicker1").datepicker({
//normal setup parameters here
onSelect: function(date) {
var minDateObject= new Date();//compose the date you want to set
$( "#datepicker2" ).datepicker( "option", "minDate",minDateObject );
}
});
Hope will be Helpful. Thanks.
希望会有所帮助。谢谢。
回答by JOB
$(document).ready(function(){
$("#txtStartDate").datepicker({
//pick the first date and must not max today
dateFormat: 'dd/mm/yy',
changeYear: true,
maxDate: '+0D',
onSelect: function (dateValue){
//onselect set the min of txtEndDate to be the current txtStartDate value
$("#txtEndDate").datepicker({
dateFormat: 'dd/mm/yy',
changeYear: true,
minDate: dateValue,
maxDate: '+0D',
});
}
});
});
回答by DanielB
Have a look at the range example: http://jqueryui.com/demos/datepicker/#date-range
回答by CBarr
I'd recommend the DateRange Picker from Filament Group: http://www.filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_jquery_ui_css_framework/
我会推荐 Filament Group 的 DateRange Picker：http: //www.filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_jquery_ui_css_framework/
I've used it in the past and it's a breeze to set up.
我过去使用过它，设置起来很容易。
回答by Prasanth
Here is another solution. In this context I am using "Date From" and "Date To" as default text in datepicker.
这是另一种解决方案。在这种情况下，我在 datepicker 中使用“Date From”和“Date To”作为默认文本。
$(function () {
$("#DateFrom").datepicker({
maxDate: new Date(new Date($('#DateTo').val()).valueOf()),
beforeShow: function () {
if ($("#DateFrom").val() == "Date From" && $("#DateTo").val() == "Date To") {
$("#DateFrom").datepicker('option', { minDate: null, maxDate: null });
}
},
onSelect: function (dateText, inst) {
var currentDate = new Date(dateText);
var valueofcurrentDate = currentDate.valueOf();
var newDate = new Date(valueofcurrentDate);
$("#DateTo").datepicker("option", "minDate", newDate);
}
});
$("#DateTo").datepicker({
minDate: new Date(new Date($('#DateTo').val()).valueOf()),
beforeShow: function () {
if ($("#DateFrom").val() == "Date From" && $("#DateTo").val() == "Date To") {
$("#DateTo").datepicker('option', { minDate: null, maxDate: null });
}
},
onSelect: function (dateText, inst) {
var currentDate = new Date(dateText);
var valueofcurrentDate = currentDate.valueOf();
var newDate = new Date(valueofcurrentDate);
$("#DateFrom").datepicker("option", "maxDate", newDate);
}
});
//checking for key combinations which are allowed
$("#DateFrom").keypress(function (e) {
switch (e.keyCode) {
case 46: // delete
case 8: // backspace
break;
default:
e.preventDefault();
break;
}
});
$("#DateTo").keypress(function (e) {
switch (e.keyCode) {
case 46: // delete
case 8: // backspace
break;
default:
e.preventDefault();
break;
}
});
});
