Цвет Jquery DatePicker в воскресенье, красный
Существует ли способ изменить цвет на, сказать красный, воскресенья в Datepicker JQuery?
4 ответа
Для воскресенья и субботы вы можете использовать тот факт, что jquery datepicker добавляет класс .ui-datepicker-week-end , поэтому вы можете добавить .ui-datepicker-week-end {color: # f00;} вам файл css.
Если вы хотите обрабатывать только воскресенье, вы должны указать, что это будет либо первый, либо последний столбец в таблице, сгенерированной jquery datepicker (это зависит от локали).
Общий совет: используйте firefox + firebug (или что-то подобное) для проверки html-кода. он дает много идей, как выполнять задачи, связанные с обходом jquery DOM.
На вкладке «Темы» на странице документации вы можете увидеть пример вывода 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) .
Если первый столбец - воскресенье, то следующий 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;
}
Если у вас есть локальная копия файла ui.datepicker.js (подойдет и пользовательский минифицированный файл) и вы больше ничего не делаете с классом .ui-datepicker-week-end, вы можете отредактировать его (лучше сделать копию для редактирования) так, чтобы этот класс был присвоен только Sunday.
В файле ui.datepicker.js при поиске 'week-end' должны появиться два результата с этим встроенным оператором if перед ними: (t+h+6)%7>=5? Если изменить >=5 на ==6, то класс .ui-datepicker-week-end будет присвоен только воскресеньям.
(t+h+6)%7==6?" ui-datepicker-week-end":""
Затем вы можете добавить к этому классу стили CSS по своему усмотрению:
.ui-datepicker-week-end {
background: #f00;
}