Jquery DatePicker цвет воскресенье красный

Question

Есть ли способ изменить цвет, скажем, на красный, по воскресеньям в Jquery Datepicker?

Answer 1

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

Не очень красиво, но работает как надо.

Answer 2

Если у вас есть локальная копия файла ui.datepicker.js (пользовательский минимизированный файл тоже подойдет) и вы ничего не делаете с классом .ui-datepicker-week-end, вы можете отредактировать его Копирование для редактирования является предпочтительным,) так что только воскресенье назначается этот класс.

В файле ui.datepicker.js поиск слова «выходной» должен привести к двум результатам с этим встроенным оператором, если перед ними стоит оператор: (t+h+6)%7>=5? Изменение> = 5 на == 6 назначит .ui- Date-Picker-выходной класс только по воскресеньям.

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

Затем вы можете добавить стили CSS, как считаете нужным для этого класса:

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

Answer 3

Для воскресенья и субботы вы можете использовать тот факт, что jquery datepicker добавляет класс .ui-datepicker-week-end, чтобы вы могли добавить .ui-datepicker-week-end{color:#f00;} к вашему файлу css.

Если вы хотите обрабатывать только воскресенья, вы должны сообщить, что это будет первый или последний столбец в таблице, сгенерированной jquery datepicker (она зависит от локали).

Общий совет: используйте firefox + firebug (или sth similiar) для проверки HTML-кода. он дает много идей, как решать задачи, связанные с обходом DOM в jquery.

Answer 4

Если предположить, что первый столбец - воскресенье, то следующий jQuery должен сделать трюк:

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

Хотя он должен запускаться при каждом изменении календаря, например, когда вы выбираете дату в качестве календарякаждый раз перерисовывается.

Вы можете использовать тот же селектор в css3, хотя он не поддерживается в IE.

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

Answer 5

Если вам нужно раскрасить субботу и воскресенье, используйте этот CSS:

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

Answer 6

вы можете изменить цвет в воскресенье, используя css

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

цвет субботы может измениться следующим образом

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

если не работает этот ваш код, перейдите к вдохновляющему элементу и найдите правильный путь cssдля даты и выбора даты выше css

Answer 7

На вкладке Темы на странице документации вы можете увидеть пример вывода HTML плагином. Вы должны быть в состоянии использовать селекторы, чтобы предназначаться для определенных элементов в HTML:

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

JQuery:

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

Не проверено и предполагается, что первый столбец - воскресенье, поэтому может потребоваться небольшая настройка. Если для воскресенья задан другой столбец, используйте :nth-child(n).