图片发自简书App
JQuery 的datepicker组件做日要选择一段日期期选择框非常方便
JQueryUI-datepiccker.png
这里有详细教程
但是如果需要选择一段时间,则需要两个datepicker,一个为起始日期,一个为结束日期
并且,结束日期需要永远晚于或者等于起始日期.需要选择一段时间的应用场景很多,比如在OTA中,机票的往返日期,酒店入住和离店时间等.
就需要这样的逻辑:
如果用户已经选择了起始日期,而后选择结束日期,那么结束日期的minDate(最早可选时间)不早于起始日期
如果用户已经选择结束日期,再选择起始日期,那么起始日期的maxDate(最晚可选时间)不晚于结束日期
上次在stackoverflow上看到有人这样写:
$(function() {
$( "#start-date").datepicker({
defaultDate: "+1w",
onSelect: function( selectedDate ) {
$( "#end-date" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#end-date" ).datepicker({
defaultDate: "+1w",
onSelect: function( selectedDate ) {
$( "#start-date" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
起始日期选择10月4日时,结束日期早于10月4日的便都无法选择
end-date.png
选择10月10日作为结束日期后,再回来选起始日期,可以看到10月10日之后的日期也都不可以选择了
start-date.png
