jQuery UI DatePicker |使用禁用的日期来防止日期范围

时间:2018-11-17 06:13:43

标签: jquery-ui datepicker jquery-ui-datepicker date-range bootstrap-datepicker

我已经使用jQuery Ui日期选择器创建了日期范围选择Start DateEnd Date

我已进行验证,以防止End Date小于Start Date

代码如下:

<input type="text" name="start_date" class="start_date form-control" required readonly>
<input type="text" name="end_date" class="end_date form-control" required readonly>
<script>
$(function () {
    var startDate = "2018-11-20",  // some start date
        endDate   = "2018-11-21",  // some end date
        dateRange = [];            // array to hold the range

    // populate the array
    for (var d = new Date(startDate); d <= new Date(endDate); d.setDate(d.getDate() + 1)) {
        dateRange.push($.datepicker.formatDate('yy-mm-dd', d));
    }

    $('.start_date').datepicker({
        dateFormat : 'yy-mm-dd',
        minDate: 2,
        beforeShowDay: function (date) {
            var dateString = jQuery.datepicker.formatDate('yy-mm-dd', date);
            return [dateRange.indexOf(dateString) == -1];
        },
        onSelect: function( selectedDate )
        {
            $( ".end_date" ).datepicker( "option", "minDate", selectedDate, {
                beforeShowDay: function (date) {
                    var dateString = jQuery.datepicker.formatDate('yy-mm-dd', date);
                    return [dateRange.indexOf(dateString) == -1];
                }
            } );
        }
    });

    $('.end_date').datepicker({
        dateFormat : 'yy-mm-dd',
        minDate: 2,
        beforeShowDay: function (date) {
            var dateString = jQuery.datepicker.formatDate('yy-mm-dd', date);
            return [dateRange.indexOf(dateString) == -1];
        },
        onSelect: function( selectedDate )
        {
            $( ".start_date" ).datepicker( "option", "maxDate", selectedDate, {
                beforeShowDay: function (date) {
                    var dateString = jQuery.datepicker.formatDate('yy-mm-dd', date);
                    return [dateRange.indexOf(dateString) == -1];
                }
            } );
        }
    });
});
</script>

结果如下:

result

我想防止用户选择已经禁用日期的日期范围,所以;用户已禁用1922,因此无法在2021之间进行选择。

有可能吗?

0 个答案:

没有答案