开发者

Highlight start of week Javascript/JQuery UI datepicker

开发者 https://www.devze.com 2023-03-23 18:47 出处:网络
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 i

I have the datepicker working and it is fully functional.

Highlight start of week Javascript/JQuery UI datepicker

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

Highlight start of week Javascript/JQuery UI datepicker

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

Highlight start of week Javascript/JQuery UI datepicker


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(...)

0

精彩评论

暂无评论...
验证码 换一张
取 消