Highlighting dates between two selected dates jQuery UI Datepicker
- by Ralph
I have one datepicker with numberOfMonths set to 2.
Arrival Date and Departure Date are determined using this logic (within onSelect):
if ((count % 2)==0) {
depart = $("#datepicker-1").datepicker('getDate');
if (arriv depart) { temp=arriv; arriv=depart; depart=temp; }
$("#check-in").val($.datepicker.formatDate("DD, MM d, yy",arriv));
$("#check-out").val($.datepicker.formatDate("DD, MM d, yy",depart));
} else {
arriv = $("#datepicker-1").datepicker('getDate');
depart = null;
if ((arriv depart)&&(depart!=null)) { temp=arriv; arriv=depart; depart=temp; }
$("#day-count").val('');
$("#check-in").val($.datepicker.formatDate("DD, MM d, yy",arriv));
$("#check-out").val($.datepicker.formatDate("DD, MM d, yy",depart));
}
if(depart!=null) {
diffDays = Math.abs((arriv.getTime() - depart.getTime())/(oneDay));
if (diffDays == 0) { $("#day-count").val((diffDays+1)+' Night/s'); } else { $("#day-count").val(diffDays+' Night/s'); }
}
Getting the number of days within these 2 dates has no problem
What I want now is highlight those dates starting from the Arrival to Departure
I tried working around the onSelect but had no luck.
I am now using beforeShowDay to highlight these dates but I can't seem to figure it out
Got a sample from here
Basically, it is customized to highlight 11 or 12 days after the selected date (Here's the code from that link).
$('#datePicker').datepicker({beforeShowDay: function(date) {
if (selected != null && date.getTime() selected.getTime() &&
(date.getTime() - selected.getTime())
Since I am new to using the UI, and the logic is not clear to me yet, I can't seem to figure this out. Any ideas on how I can make this highlight dates between the Arrival and Departure using my aforementioned logic used in determining the two?
