Question

我有一个日期选择器，允许用户选择两个日期（签入和签出）。

我尝试做的是在悬停时突出显示所选日期范围，例如在用户选择了检查日期08/03/2018并且正在选择结帐日期之后，如果他们超过14/03/2018，将突出显示08/03/2018和14/03/2018之间的所有日期。

我试图在Kayak上创建类似于datepicker的东西：https://www.kayak.co.uk/

到目前为止的工作代码：https://jsfiddle.net/p1zpq9au/6/

非常感谢任何帮助！

jQuery(document).ready(function($) {

    // Format the date
    function dp_format_date(dateInput) {

        var date_array = new Array();
        date_array = dateInput.split('-');
        var newDate = (date_array[2] + "/" + date_array[1] + "/" + date_array[0]);
        return newDate;

    }

    function dp_check_in_onselect(date) {

        // Set check in
        if ( $("#check_in_alt").val() == '' && $("#check_out_alt").val() == '') {

            $("#check_in").val( dp_format_date(date) );
            $("#check_in_alt").val( date );
            $("#check_out_alt").val('');
            $(this).data('datepicker').inline = true; 

        }

        // Set check out
        else if ( $("#check_in_alt").val() != '' && $("#check_out_alt").val() == '') {

            $("#check_out").val( dp_format_date(date) );
            $("#check_out_alt").val( date );
            $("#check_in").val( dp_format_date( $("#check_in_alt").val() ) );
            $(this).data('datepicker').inline = false;

        }

        // Set check in
        else {

            $("#check_in").val( dp_format_date(date) );
            $("#check_in_alt").val( date );
            $("#check_out_alt").val('');
            $(this).data('datepicker').inline = true; 

        }

    }

    // Load Datepicker Function
    function dp_load_datepicker() {

        jQuery("#check_in").datepicker({
            minDate: new Date(),
            numberOfMonths: 2,
            dateFormat: 'yy-mm-dd',
            firstDay: 1,
            onSelect: dp_check_in_onselect,
        });

    }

    dp_load_datepicker();

});

jQuery datepicker突出显示所选日期范围

0 个答案: