How to prevent jQuery uidatepicker from highlighting selected (or current) date in all months of calendar?

Question

I've gone through the options for this plugin several times and can't seem to find a way of turning off this behaviour: the current or selected date is highlighted in all months of the widget, not only the current month. For example if I select August 17th then advance to september, october and so on, the 17th will also be selected in those months, which in my mind makes no sense. I can't figure out why it's doing that, or even the rationale behind it if it's a feature (I guess that can be a secondary question). Any idea how to turn it off? The link on all the months are being assigned the same css classes. Below are the options I'm using:

var dates = $("#checkin").datepicker({
    changeMonth: true,
    numberOfMonths: 2,
    dateFormat: 'M d, yy'
});

Answer 1

Are you modifying the CSS at all? Here's a jsFiddle that I put together for a different SO question and I modified it for the datepicker settings you listed. I don't see the behavior you're describing. My initial guess is that you're overriding the CSS somewhere. Is that the case?

Hope this helps!

Answer 2

The bug (or feature, but i hope it's not) was introduced in the 1.8.4 release of jQuery UI (hence the demo posted by D Hoerster works, since it's using the 1.8.2 version). The source of it is on line 8384 in this version hosted by Google. It's the part covering the generation of the actual HTML of the datepicker. It's inside a loop, iterating over each month to be drawn. It reads

var selectedDate = this._daylightSavingAdjust(new Date(drawYear, drawMonth, inst.selectedDay));

Now, drawmonth/year is the current month being drawn (duh), so it's pretty obvious what's going in. The result is your stated problem - if you select the 17th in one month, selectedDate will be set to the 17th of every month as you iterate over them and these will be highlighted. Judging by the variable name (selectedDate) and it's semantic meaning it should instead state

var selectedDate = this._daylightSavingAdjust(new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay));

The funny thing is that this error was also present in the 1.8.2 version, but the code that does the highlighting didn't use it in the previous version. In 1.8.2, highlighting the current date was done like (on line 8446):

(printDate.getTime() == currentDate.getTime() ? ' ui-state-active' : '') + // highlight selected day

and looking at the code, it's clear that it should instead be as it is in the 1.8.4 version (use selectedDate instead of currentDate):

(printDate.getTime() == selectedDate.getTime() ? ' ui-state-active' : '') + // highlight selected day

---

So it's weird there's not any more bugs going on, since selectedDate apparently is wrong and is used several places. (And the fact that nothing was wrong in the previous version, despite the wrong variable being used to highlight the current date) I've been looking at this code for too long now, so I don't know whether I'm right or totally wrong anymore. This should nevertheless be a good fundament for people wanting to investigate it further and possibly do a bug report. I'll do it myself eventually when i get the time (and my sanity back)