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

Question

I used the parameters of this plugin several times and cannot find a way to disable this behavior: the current or selected date is highlighted during all months of the widget, and not just the current month. For example, if I choose August 17, and then move on to September, October, etc., the 17th will also be selected in those months, which, in my opinion, is pointless. I can’t understand why he is doing this, or even the rationale, if this is a function (I think this may be a secondary issue). Any idea how to disable it? A link to all months is assigned to the same css classes. Below are the options I use:

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

Answer 1

The error (or function, but I hope it is not) was introduced in version 1.8.4 of jQuery UI (hence the demo posted by D Hoerster works as it uses version 1.8.2). The source of this is line 8384 in this version posted by Google. This is the part covering the generation of the actual datepicker HTML file. It is inside the cycle, repeating every month to be drawn. He reads

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

Now drawmonth/year is the current month that is looming (duh), so it’s pretty obvious what’s happening. As a result, your stated problem is that if you select 17th place in one month, selectedDate will be set on the 17th of each month when you iterate over them and they will be highlighted. Judging by the name of the variable ( selectedDate ) and its semantic value, you should instead indicate

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

The funny thing is that this error was also present in version 1.8.2, but the code that makes the selection did not use it in the previous version. In 1.8.2, highlighting the current date was performed as (on line 8446):

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

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

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

---

So it’s strange that no more errors occur, since selectedDate seems to be erroneous and is used in several places. (And the fact that nothing happened in the previous version, despite the fact that an incorrect variable was used to calculate the current date). I have looked at this code for too long, so I don’t know if I am right or wrong. Nevertheless, this should be a good basis for people who want to continue the study and possibly report a mistake. I will do it myself in the end when I get the time (and my sanity)

Answer 2

Do you change CSS at all? Here's the jsFiddle that I put together for another SO question, and I changed it for the datepicker options you specified. I do not see the behavior that you are describing. My initial hunch is that you are redefining CSS somewhere. Is that the case?

Hope this helps!