jQuery DatePicker – 动态更改minDate和maxDate
我对jQuery Datepicker有一个特殊的问题。 我可以轻松添加日期范围，但我希望可选范围根据用户选择的事件进行更改。
因此，如果他们选择事件＃1，他们只能从事件＃1的日期范围中选择日期。
我编写了一个简单的小函数，只要用户选择一个新事件就会调用它，但它只显示最初设置的minDate / maxDate值。
function datepicker(startDate, endDate) { $( "#date" ).datepicker({ inline: true, minDate: new Date(startDate), maxDate: new Date(endDate), dateFormat: 'dd/mm/yy' }); } 我试过调用$('#date').datepicker('remove'); 在再次调用上面的函数之前，看看它是否创建了一个具有正确日期的新实例，但它似乎不起作用。
我已经通过开发人员工具检查了所有数据，所有内容都被正确调用和传递。 有什么我可以做的，让我的工作如何我想要它？
你有几个选择……
1）你需要调用destroy()方法而不是remove()所以……
$('#date').datepicker('destroy');
然后调用您的方法重新创建datepicker对象。
2）您可以通过更新现有object的属性
$('#date').datepicker('option', 'minDate', new Date(startDate)); $('#date').datepicker('option', 'maxDate', new Date(endDate));
要么…
$('#date').datepicker('option', { minDate: new Date(startDate), maxDate: new Date(endDate) });
对于from / to date，以下是我根据在另一个datepicker中输入的日期实施限制日期的方法。 效果很好：
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()) } ); } }); }
$(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 }); } }); });
我知道你正在使用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.*/