JQuery UI Datepicker - Date Range - Highlight Days Between

Question

I am looking for a way to highlight days between the date range of two mouse inputs.

This example almost accomplishes what I want to achieve: http://hackingon.net/files/jquery_datepicker/range.htm

The only difference is that the selection of the selected range must occur on two separate dates and when you hover the mouse.

Any suggestions?

---

Update:

Ok, a little more detail:

After selecting a date from the first datepicker, the second datepicker should highlight the previous selected date. If you then hover over the day preceding the previous selected day, all days between them should be highlighted by adding a class.

---

Update: Here is how I guessed:

$("#input-service_date_leave, #input-service_date_return").datepicker({ rangeSelect: true, beforeShow: customRange, onSelect: customRange, }); function customRange(input) { if (input.id == "input-service_date_leave") { $("#ui-datepicker-div td").die(); if (selectedDate != null) { $('#input-service_date_return').datepicker('option', 'minDate', selectedDate).datepicker('refresh'); } } if (input.id == "input-service_date_return") { $("#ui-datepicker-div td").live({ mouseenter: function() { $(this).prevAll("td:not(.ui-datepicker-unselectable)").addClass("highlight"); }, mouseleave: function() { $("#ui-datepicker-div td").removeClass("highlight"); } }); var selectedDate = $("#input-service_date_leave").datepicker("getDate"); if (selectedDate != null) { $('#input-service_date_return').datepicker('option', 'minDate', selectedDate).datepicker('refresh'); } } } 

http://jsfiddle.net/mayko/WbWg3/1/

Only problem, a live event just highlights the td of the current hovering line, but not the td lines before.

Any ideas?

Answer 1

I added a little to your script. Worked like a JSFiddle charm. Take a look and let me know.

  $("#input-service_date_leave, #input-service_date_return").datepicker({ rangeSelect: true, beforeShow: customRange, onSelect: customRange, }); function customRange(input) { if (input.id == "input-service_date_leave") { $("#ui-datepicker-div td").die(); if (selectedDate != null) { $('#input-service_date_return').datepicker('option', 'minDate', selectedDate).datepicker('refresh'); } } if (input.id == "input-service_date_return") { $("#ui-datepicker-div td").live({ mouseenter: function() { $(this).parent().addClass("finalRow"); $(".finalRow").prevAll().find("td:not(.ui-datepicker-unselectable)").addClass("highlight"); $(this).prevAll("td:not(.ui-datepicker-unselectable)").addClass("highlight"); }, mouseleave: function() { $(this).parent().removeClass("finalRow"); $("#ui-datepicker-div td").removeClass("highlight"); } }); var selectedDate = $("#input-service_date_leave").datepicker("getDate"); if (selectedDate != null) { $('#input-service_date_return').datepicker('option', 'minDate', selectedDate).datepicker('refresh'); } } } 

Answer 2

edit: This script does not work on jquery 3. however, it works with versions 1 and 2

this JSFiddle is an example of its execution with two date tables (several months)

 $("#input-service_date_leave, #input-service_date_return").datepicker({ rangeSelect: true, beforeShow: customRange, onSelect: customRange, numberOfMonths: [1, 2], }); function customRange(input) { if (input.id == "input-service_date_leave") { $("#ui-datepicker-div td").die(); if (selectedDate != null) { $('#input-service_date_return').datepicker('option', 'minDate', selectedDate).datepicker('refresh'); } } if (input.id == "input-service_date_return") { $("#ui-datepicker-div td").live({ mouseenter: function() { $(this).parent().addClass("finalRow"); $(".finalRow").parents('.ui-datepicker-group-last').parent().find('.ui-datepicker-group-first').find('tr').last().addClass("finalRowRangeOtherTable"); $(".finalRowRangeOtherTable").find("td:not(.ui-datepicker-unselectable)").addClass("highlight"); $(".finalRowRangeOtherTable").prevAll().find("td:not(.ui-datepicker-unselectable)").addClass("highlight"); $(".finalRow").prevAll().find("td:not(.ui-datepicker-unselectable)").addClass("highlight"); $(this).prevAll("td:not(.ui-datepicker-unselectable)").addClass("highlight"); }, mouseleave: function() { $(this).parent().removeClass("finalRow"); $("#ui-datepicker-div td").removeClass("highlight"); $(".finalRowRange").removeClass("finalRowRange").find('.highlight').removeClass("highlight"); $(".finalRowRangeOtherTable").removeClass("finalRowRangeOtherTable").find('.highlight').removeClass("highlight"); } }); var selectedDate = $("#input-service_date_leave").datepicker("getDate"); if (selectedDate != null) { $('#input-service_date_return').datepicker('option', 'minDate', selectedDate).datepicker('refresh'); } } } 

Answer 3

Made an example of a date range pattern for the built-in datepicker here: http://codepen.io/denissamoilov/pen/RGKyPb?editors=0010

 $(function(){ var datepicker = { container: $("#datepicker"), dateFormat: 'mm/dd/yy', dates: [null, null], status: null, inputs: { checkin: $('#checkin'), checkout: $('#checkout'), dates: $('#dates') } }; datepicker.container.datepicker({ numberOfMonths: 2, dateFormat: datepicker.dateFormat, minDate: 0, maxDate: null, beforeShowDay: function(date) { var highlight = false, currentTime = date.getTime(), selectedTime = datepicker.dates; // Highlight date range if ((selectedTime[0] && selectedTime[0] == currentTime) || (selectedTime[1] && (currentTime >= selectedTime[0] && currentTime <= selectedTime[1]))) highlight = true; return [true, highlight ? 'ui-datepicker-select' : ""]; }, onSelect: function(dateText) { if (!datepicker.dates[0] || datepicker.dates[1] !== null) { // CHOOSE FIRST DATE // fill dates array with first chosen date datepicker.dates[0] = $.datepicker.parseDate(datepicker.dateFormat, dateText).getTime(); datepicker.dates[1] = null; // clear all inputs datepicker.inputs.checkin.val(''); datepicker.inputs.checkout.val(''); datepicker.inputs.dates.val(''); // set current datepicker state datepicker.status = 'checkin-selected'; // create mouseover for table cell $('#datepicker').delegate('.ui-datepicker td', 'mouseover', function(){ // if it doesn't have year data (old month or unselectable date) if ($(this).data('year') == undefined) return; // datepicker state is not in date range select, depart date wasn't chosen, or return date already chosen then exit if (datepicker.status != 'checkin-selected') return; // get date from hovered cell var hoverDate = $(this).data('year')+'-'+($(this).data('month')+1)+'-'+$('a',this).html(); // parse hovered date into milliseconds hoverDate = $.datepicker.parseDate('yy-mm-dd', hoverDate).getTime(); $('#datepicker td').each(function(){ // compare each table cell if it date is in date range between selected date and hovered if ($(this).data('year') == undefined) return; var year = $(this).data('year'), month = $(this).data('month'), day = $('a', this).html(); var cellDate = $(this).data('year')+'-'+($(this).data('month')+1)+'-'+$('a',this).html(); // convert cell date into milliseconds for further comparison cellDate = $.datepicker.parseDate('yy-mm-dd', cellDate).getTime(); if ( (cellDate >= datepicker.dates[0] && cellDate <= hoverDate) || (cellDate <= datepicker.dates[0] && cellDate >= hoverDate) ) { $(this).addClass('ui-datepicker-hover'); } else { $(this).removeClass('ui-datepicker-hover'); } }); }); } else { // CHOOSE SECOND DATE // push second date into dates array datepicker.dates[1] = $.datepicker.parseDate(datepicker.dateFormat, dateText).getTime(); // sort array dates datepicker.dates.sort(); var checkInDate = $.datepicker.parseDate('@', datepicker.dates[0]); var checkOutDate = $.datepicker.parseDate('@', datepicker.dates[1]); datepicker.status = 'checkout-selected'; //fill input fields datepicker.inputs.checkin.val($.datepicker.formatDate(datepicker.dateFormat, checkInDate)); datepicker.inputs.checkout.val($.datepicker.formatDate(datepicker.dateFormat, checkOutDate)).change(); datepicker.inputs.dates.val(datepicker.inputs.checkin.val() + ' - ' + datepicker.inputs.checkout.val()); } } }); }); 

Answer 4

jQuery UI Datepicker - date range - allocates days between

I added a little to your script. Worked like a charm on JSFiddle. Take a look and let me know.

http://jsfiddle.net/mkginfo/C5r9d/1/

 var dates = $("#datepicker1, #datepicker2").datepicker({ changeMonth: true, changeYear: true, dateFormat: 'dd/mm/yy', maxDate: "01/01/2050", minDate: "01/01/2000", onSelect: function (selectedDate) { var option = this.id == "datepicker1" ? "minDate" : "maxDate", instance = $(this).data("datepicker"), date = $.datepicker.parseDate( instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings); dates.not(this).datepicker("option", option, date); } });