Jquery DatePicker color Sunday red

Is there a way to change the color to, say red, the Sundays in a Jquery Date开发者_StackOverflow中文版picker?

---

$('#something').datepicker({
    beforeShowDay:function(date){
        if(date.toString().indexOf('Sun ')!=-1)
            return [1,'red'];else
            return [1];
    }
}

css:

.ui-datepicker td.red a{
color:#f00 !important;
}    

Not very beautiful, but works as needed.

---

For Sundays and Saturdays you can consider using fact that jquery datepicker adds class .ui-datepicker-week-end so you can add .ui-datepicker-week-end{color:#f00;} to you css file.

If you want to handle only Sundays you must relay on fact that this will be either first or last column in a table generated by jquery datepicker (it is locale-dependent).

General advice: use firefox+firebug(or sth similiar) to inspect html code. it gives a lot of ideas how to accomplish tasks related to jquery DOM traversing.

---

If you have a local copy of the ui.datepicker.js file (the custom minified file would work too) and are doing nothing else with the .ui-datepicker-week-end class, you can edit it (making a copy to edit is preferred,) so that only Sunday is assigned that class.

In the ui.datepicker.js file, searching for 'week-end' should bring up two results with this inline if statement preceding them: (t+h+6)%7>=5? Changing the >=5 to ==6 will assign the .ui-datepicker-week-end class only to Sundays then.

(t+h+6)%7==6?" ui-datepicker-week-end":""

Then you can add CSS styling as you see fit to that class:

.ui-datepicker-week-end {
    background: #f00;
}

---

Assuming that the first column is sunday then the following jQuery should do the trick:

$('table.ui-datepicker-calendar td.ui-datepicker-week-end:nth-child(1) a').css({'background':'#f00'});

Though it would have to be run each time the calendar is changed e.g. when you select a date as the calendar is redrawn every time.

You could use the same selector in css3 though it is not supported in IE.

table.ui-datepicker-calendar td.ui-datepicker-week-end:nth-child(1) a
{
    background: #f00;
}

---

If you need to color both Saturday and Sunday use this CSS:

.ui-datepicker-week-end, .ui-datepicker-week-end a.ui-state-default {color: #C00;}

---

Under the Theming tab on the documentation page, you can see the example HTML output by the plugin. You should be able to use selectors to target specific elements in the HTML:

.ui-datepicker-calendar > tbody td:first-child {
    background-color: red;
}

jQuery:

$(".ui-datepicker-calendar > tbody td:first-child").css("background-color: red");

Untested and assumes the first column is Sunday, so a bit of tweaking might be required. If Sunday is set to a different column, use :nth-child(n) instead.

---

you can change color sunday using css

.datepicker table tr td:first-child {
 color: red
 }

saturday color can change like this

.datepicker table tr td:first-child + td + td + td + td + td + td  {
 color: red
 }

if not working this your code,go to inspent element and find correct css path for datepicker date and set above css ot it