I'm looking for a way of highlighting the days in between the date range of 2 inputs on mouse over.
This example is nearly doing what I want to achieve: http://hackingon.net/files/jquery_datepicker/range.htm
Only difference is that the highlighting of the selected range should happen on two separate datepickers and on mouse over.
Any suggestions?
Update:
Ok, a bit more details:
After selecting a date from the first datepicker, the second datepicker should highlight the previous selected date. If you then mouse over a day past the previous selected day, all days in between should highlight by adding a class.
Update: This is how far I got:
$("#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, the live event just highlights the td's of the current hovered row, but not the td's of the rows before.
Any ideas?
jQuery UI Datepicker - Date range - Highlight days in between
I added a bit to your script. Worked like a charm on JSFiddle. Take a look and let me know.
http://jsfiddle.net/mkginfo/C5r9d/1/
I added a bit to your script. Worked like a charm on JSFiddle. Take a look and let me know.
Made an example of date range hover for an inline datepicker here: http://codepen.io/denissamoilov/pen/RGKyPb?editors=0010
edit: This script does not work on jquery 3. however it does work on version 1 and 2
this JSFiddle is an example of doing it with 2 date tables ( multiple months )