使用 jQuery DatePicker 动态更改 minDate 和 maxDate
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16267903/
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
Changing minDate and maxDate on the fly using jQuery DatePicker
提问by Chuck Le Butt
I'm having a particular issue with the jQuery Datepicker. I can easily add a date range, but I want the selectable range to change depending on the event the user has picked.
我在使用 jQuery Datepicker 时遇到了一个特殊问题。我可以轻松添加日期范围，但我希望可选范围根据用户选择的事件而改变。
So if they pick event #1, they can only pick dates from event #1's date range.
因此，如果他们选择事件 #1，他们只能从事件 #1 的日期范围中选择日期。
I've written a simple little function that gets called whenever the user selects a new event, but it only ever shows the initially set minDate/maxDate values.
我编写了一个简单的小函数，每当用户选择一个新事件时都会调用它，但它只显示最初设置的 minDate/maxDate 值。
function datepicker(startDate, endDate) {
$( "#date" ).datepicker({
inline: true,
minDate: new Date(startDate),
maxDate: new Date(endDate),
dateFormat: 'dd/mm/yy'
});
}
I've tried calling $('#date').datepicker('remove');before calling the above function again, to see if it creates a new instance with the correct dates, but it doesn't seem to work.
我已经尝试$('#date').datepicker('remove');在再次调用上述函数之前调用它，以查看它是否创建了一个具有正确日期的新实例，但它似乎不起作用。
I've checked all the data through developer tools and everything is being called and passed correctly. Is there anything I can do to make this work how I want it to?
我已经通过开发人员工具检查了所有数据，一切都被正确调用和传递。有什么我可以做的事情来使这项工作如我所愿吗？
回答by Jared
You have a couple of options...
你有几个选择...
1) You need to call the destroy()method not remove()so...
1）你需要调用的destroy()方法不是remove()这样......
$('#date').datepicker('destroy');
Then call your method to recreate the datepickerobject.
然后调用您的方法来重新创建datepicker对象。
2) You can update the property of the existing objectvia
2）您可以更新现有的财产object通过
$('#date').datepicker('option', 'minDate', new Date(startDate));
$('#date').datepicker('option', 'maxDate', new Date(endDate));
or...
或者...
$('#date').datepicker('option', { minDate: new Date(startDate),
maxDate: new Date(endDate) });
回答by MattC
For from / to date, here is how I implemented restricting the dates based on the date entered in the other datepicker. Works pretty good:
对于从/到日期，这里是我如何根据在另一个日期选择器中输入的日期来限制日期。效果很好：
function activateDatePickers() {
$("#aDateFrom").datepicker({
onClose: function() {
$("#aDateTo").datepicker(
"change",
{ minDate: new Date($('#aDateFrom').val()) }
);
}
});
$("#aDateTo").datepicker({
onClose: function() {
$("#aDateFrom").datepicker(
"change",
{ maxDate: new Date($('#aDateTo').val()) }
);
}
});
}
回答by Gregorio Marciano
$(document).ready(function() {
$("#aDateFrom").datepicker({
onSelect: function() {
//- get date from another datepicker without language dependencies
var minDate = $('#aDateFrom').datepicker('getDate');
$("#aDateTo").datepicker("change", { minDate: minDate });
}
});
$("#aDateTo").datepicker({
onSelect: function() {
//- get date from another datepicker without language dependencies
var maxDate = $('#aDateTo').datepicker('getDate');
$("#aDateFrom").datepicker("change", { maxDate: maxDate });
}
});
});
回答by Matias Seguel
I know you are using Datepicker, but for some people who are just using HTML5 input date like me, there is an example how you can do the same: JSFiddle Link
我知道你在使用 Datepicker，但对于像我这样只使用 HTML5 输入日期的人来说，有一个例子你可以这样做： JSFiddle Link
$('#start_date').change(function(){
var start_date = $(this).val();
$('#end_date').prop({
min: start_date
});
});
/* prop() method works since jquery 1.6, if you are using a previus version, you can use attr() method.*/
回答by Mustufa
I have changed min date property of date time picker by using this
我使用此更改了日期时间选择器的 min date 属性
$('#date').data("DateTimePicker").minDate(startDate);
I hope this one help to someone !
我希望这对某人有所帮助！
