我正在开发基于Twitter Bootstrap的日期选择器,它使用https://github.com/eternicode/bootstrap-datepicker中的日期选择器。
我想要扩展做一些事情,比如允许用户选择2个日期,并在更改时更新以后的日历
目前正在使用以下功能,但它只工作一次...
$("#depart_date").datepicker(dp) .on('changeDate',function(ev){ $("#return_date").datepicker({ format:defaultDateFormat, autoclose:true, startDate: $("#depart_date").val() }); });
我怎样才能做到这一点?
我在jsFiddle中为您整理了这些内容,希望它能满足您的需求。需要注意的是,有一个setstartdate
函数,如果您希望在初始化后更新最小日期,您应该在datepicker上使用它。
HTML
<input type="text" class="span2" value="02-16-2012" id="depart-date">
<input type="text" class="span2" value="02-16-2012" id="return-date">
JavaScript
$(function() {
// create the departure date
$('#depart-date').datepicker({
autoclose: true,
format: 'mm-dd-yyyy',
}).on('changeDate', function(ev) {
ConfigureReturnDate();
});
$('#return-date').datepicker({
autoclose: true,
format: 'mm-dd-yyyy',
startDate: $('#depart-date').val()
});
// Set the min date on page load
ConfigureReturnDate();
// Resets the min date of the return date
function ConfigureReturnDate() {
$('#return-date').datepicker('setStartDate', $('#depart-date').val());
}
});
或者,这里有一个日期范围选择器,可以在这里找到。