I have the datepicker working and it is fully functional.
From the above image it can be seen that the week picker works. However I would like the datepicker to highlight the current week. Which in this example should highlight whole of the start of the week. Which I would like to look like this or similar
How is this done?
Edited Ideally when the page loads up I would li开发者_运维技巧ke the current week to be highlighted instead of the user having to select the week themselves. In the example supplied, the day is currently selected but I wish to have the current week automatically selected. Like below
The TD
that is selected has the class ui-datepicker-current-day
, so that might be what you want to find. You can do the highlighting by attaching a click event with the datepicker element, e.g.
$( "#datepicker" ).datepicker().click(function(event) {
// highlight the TR
$(".ui-datepicker-current-day").parent().addClass('highlight');
// highlight the TD > A
$(".ui-datepicker-current-day").siblings().find('a').addClass('highlight2');
});
And you can define the highlight
and highlight2
classes to your heart's content.
Note that, the onSelect
event does not do the trick, as the calendar is refreshed each time a date is clicked.
Here is an example: http://jsfiddle.net/9DdfL/2/
each row of dates in the datepicker is a <tr>
. the <td>
element which contains today's date has the class ui-datepicker-today
.
therefore, you can search for the parent of this element to get the corresponding tr and assign whatever class you want to it:
$(".ui-datepicker-today").parent().addClass(...)
精彩评论