Datepicker 范围不允许退房日期为同一天

Question

我想在同一天登记入住和退房日期，但它不允许我这样做。请帮我做一下。

var ajax_check_var = '';
$('.location_search_results_ul').hide();

$("#check_in_time").datepicker({
    showOtherMonths: true,
    dateFormat: 'dd-mm-yy',
    minDate: 0,
    //for calender Css
    beforeShowDay: function (date) {
        return highlightDateBorder($("#check_in_time").val(), date);
    },
    onSelect: function(selectedDate) {
        var date_format = selectedDate.split("-");
        var selectedDate = new Date($.datepicker.formatDate('yy-mm-dd', new Date(date_format[2], date_format[1] - 1, date_format[0])));
        selectedDate.setDate(selectedDate.getDate() + 1);
        $("#check_out_time").datepicker("option", "minDate", selectedDate);
    },
});

$("#check_out_time").datepicker({
    showOtherMonths: true,
    dateFormat: 'dd-mm-yy',
    //for calender Css
    beforeShowDay: function (date) {
        return highlightDateBorder($("#check_out_time").val(), date);
    },
    beforeShow: function (input, instance) {
        var date_to = $('#check_in_time').val();
        if (typeof date_to != 'undefined' && date_to != '') {
            var date_format = date_to.split("-");
            var selectedDate = new Date($.datepicker.formatDate('yy-mm-dd', new Date(date_format[2], date_format[1] - 1, date_format[0])));
            selectedDate.setDate(selectedDate.getDate()+1);
            $("#check_out_time").datepicker("option", "minDate", selectedDate);
        } else {
            var date_format = new Date();
            var selectedDate = new Date($.datepicker.formatDate('yy-mm-dd', new Date()));
            selectedDate.setDate(selectedDate.getDate()+1);
            $("#check_out_time").datepicker("option", "minDate", selectedDate);
        }
    }
});

Answer 1

在您的代码中多次将 check_out_time 日期选择器的 minDate 设置为 selectedDate。但是 selectedDate 从来都不是实际的 selected 日期，而是 selected 日期 + 1 因为以下行。

selectedDate.setDate(selectedDate.getDate()+1)

改变它应该可以让你在同一天select。

我还建议清理所有重复的代码，你有很多重复几次的行为，这让阅读变得一团糟:) 您可以将三行移动到一个函数并调用它，而不是仅仅在三个地方重复基本相同的逻辑。

const date_format = selectedDate.split("-");
setMinData(new Date(date_format[2], date_format[1] - 1, date_format[0]));

function setMinDate(date) {
    var selectedDate = new Date($.datepicker.formatDate('yy-mm-dd', date));
    selectedDate.setDate(selectedDate.getDate() + 1);
    $("#check_out_time").datepicker("option", "minDate", selectedDate);
}

Datepicker 范围不允许退房日期为同一天

Datepicker range don't allow the check out date to same day

javascript

jquery

html

css

jquery-ui-datepicker