Jquery DatePicker color Sunday red

问题

Is there a way to change the color to, say red, the Sundays in a Jquery Datepicker?

回答1:

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.

回答2:

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;
}

回答3:

$('#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.

回答4:

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;
}

回答5:

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;}

回答6:

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.

回答7:

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

来源：https://stackoverflow.com/questions/3037347/jquery-datepicker-color-sunday-red

标签

jquery

css

jquery-ui

datepicker