JQuery datepicker 实现选取一段时间

图片发自简书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