Edit Question - KnowledgeHub

Title Body

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

Tags (comma-separated) Cancel