Как изменить цвет ячейки jQuery datepicker

Question

Как изменить цвет ячейки jQuery datepicker

У меня есть jQuery datepicker, и мне нужно иметь возможность изменить цвет фона для выбранной даты ячейки. Я пытаюсь с чем-то вроде:

    $("#fecha").datepicker({ 

          onSelect: function(value, date) { 

             alert(date.css());

          } 

    });

Надеясь, что параметр date ссылается на выбранную ячейку, но он, похоже, не работает.

Есть предложения?

/ / править:
Решение должно позволить мне иметь разные ячейки с разными цветами, установленными динамически, вот почему я пытаюсь с onSelect вместо изменения CSS напрямую.

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

Заранее благодарю.

892 4

jQuery jquery-ui jquery-ui-datepicker

4 ответов:

Comments

Ничего не найдено.

dan richardson · Accepted Answer · 2010-05-26 14:18:15

Я думаю, что лучший способ (если я правильно вас понял) - это просто переопределить css.
В вашей таблице стилей сайта или разделе html head вам просто нужно переопределить следующий CSS селектор
.ui-datepicker-current-day .ui-state-active { background: #000000; }
EDIT

Имея в виду ваше редактирование, следующее должно работать (предполагая, что вы можете заставить datepicker прекратить обновление)
onSelect: function(value, date) {
    date.dpDiv.find('.ui-datepicker-current-day a')
        .css('background-color', '#000000');
}

Gabriele Petrioli · Accepted Answer · 2010-05-25 19:09:48

Измените в css класс .ui-datepicker-current-day

Liko · Accepted Answer · 2018-09-14 00:55:13

В моем случае мне нужно удалить активный класс, поэтому:
$("#datepicker").datepicker({
  onSelect: function(dateText, inst) {
    setTimeout(function(){
      inst.dpDiv.find('.ui-datepicker-current-day a').removeClass('ui-state-active');
    }, 50);
  }
});

Chad Kuehn · Accepted Answer · 2012-03-06 20:31:05

По умолчанию datepicker следует за вашей темой. Но вы можете отменить все, что угодно.

ui-state-active это стиль выбранной вами даты. ui-state-highlight - это стиль, используемый для определения текущей даты.

Так сделайте что-нибудь вроде этого:
#ui-datepicker-div .ui-state-active {color: #FFFFCC;}

#ui-datepicker-div .ui-state-highlight {color: #DCDCDC;}
Вы можете добавить этот css на страницу или настроить саму тему.