0

I have a datepicker which allows users to select two dates (check in and check out).

What I'm trying to do is highlight the selected date range on hover, so for example after the user has selected the check in date 08/03/2018 and is in the process of selecting the check out date, if they're hovering over 14/03/2018, all the dates between 08/03/2018 and 14/03/2018 would be highlighted.

I'm trying to create something similar to the datepicker on Kayak: https://www.kayak.co.uk/

Working code so far: https://jsfiddle.net/p1zpq9au/6/

Any help much appreciated!

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();

});
The Bobster
  • 573
  • 4
  • 20
  • _Another alternative_ Use [daterangepicker](http://www.daterangepicker.com/) – Hamza Abdaoui Mar 08 '18 at 10:28
  • 1
    Thanks, I wondered why there wasn't much info explaining how to do this with datepicker. Looks like I'm simply using the wrong tool for the job! – The Bobster Mar 08 '18 at 10:35
  • I found a answer in this link https://stackoverflow.com/questions/7831512/jquery-ui-datepicker-date-range-highlight-days-in-between – sethuraman Mar 08 '18 at 12:13
  • Thanks, yes I found that too when I was searching. The only problem is it's almost 7 years old and doesn't work with the latest jQuery. I actually tried adapting it to work with the newest jQuery but couldn't get it to work – The Bobster Mar 08 '18 at 13:05

0 Answers0