Datepicker highlight custom dates CSS issue
Hello,
I've been playing with the jQuery UI Datepicker 1.6rc6 with the target
to have special dates with custom classes.
I know that there is a solution, that was spoken about in here, using
the beforeShowDay method.
The I encountered is that the special class is added to the <td> tag
of the day, and later on, a class that is called 'ui-state-default' is
added to the <a> tag, which results in covering the special class that
I made which was assigned to the <td> tag.
example:
<td class="specialClass">...<a class="ui-state-default">...</a>...</
td>
I fixed this issue by adding a condition to check the DaySettings[1]
and if it has a special class it adds only the special class to the
<a> tag, else, it will add the 'ui-state-default' class:
Line 1388 on ui.datepicker.js ver 1.6rc6:
Before:
(unselectable ? '<span class="ui-state-default">' + printDate.getDate
() + '</span>' : '<a class="ui-state-default' +
After:
(unselectable ? '<span class="ui-state-default">' + printDate.getDate
() + '</span>' : '<a class="' +
(daySettings[1] == '' ? ' ui-state-default ' : daySettings[1] + ' ') +
I removed the code that adds the class to the <td> tag.
I'm a beginner in JS so I'm sure that this can be done in a nicer way,
but it does the trick, and now I can use the beforeShowDay method.
I hope it helps,
Uri T.