Есть ли способ стилизовать дни выбора даты в jquery? - PullRequest
Новая
       9

Есть ли способ стилизовать дни выбора даты в jquery?

8 голосов
/ 18 мая 2011

Допустим, я хочу, чтобы 5/2/2011 (или любой другой день) был другого цвета, чем остальные дни. Возможно ли это?

Это пример элемента для определенного дня 

<td class=" " onclick="DP_jQuery_1305738227207.datepicker._selectDay('#datepicker',4,2011, this);return false;"><a class="ui-state-default ui-state-hover" href="#">11</a></td>

Я не знаю, есть ли способ переопределить, как средство выбора даты создает идентификаторы / классы для каждого дня.

1 Ответ

7 голосов
/ 18 мая 2011

Рабочий пример: http://jsfiddle.net/hunter/UBPg5/

Вы можете сделать это, добавив beforeShowDay обратный вызов

Привязать свой обратный вызов: 

$("input:text.date").datepicker({
    beforeShowDay: SetDayStyle
});

Создайте свою функцию с помощью статического массива неправильных дат или создайте этот массив где-нибудь еще: 

var badDates = new Array("5/2/2011");
function SetDayStyle(date) {
    var enabled = true;
    var cssClass = "";

    var day = date.getDate();
    var month = date.getMonth() + 1; //0 - 11
    var year = date.getFullYear();
    var compare = month + "/" + day + "/" + year;

    var toolTip = badDates.indexOf(compare) + " " + compare

    if (badDates.indexOf(compare) >= 0) cssClass = "bad";

    return new Array(enabled, cssClass, toolTip);
}

Создайте свои стили 

.bad { background: red; }
.bad a.ui-state-active { background: red; color: white; }

http://jqueryui.com/demos/datepicker/#event-beforeShowDay

Функция принимает в качестве параметра дату и должна возвращать массив с [0], равным true / false, указывающим, можно ли выбрать эту дату, [1] равным имени (ям) класса CSSили '' для презентации по умолчанию и [2] необязательная всплывающая подсказка для этой даты.Он вызывается для каждого дня в средстве выбора даты перед его отображением.

...