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

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

    $("#fecha").datepicker({ 
          onSelect: function(value, date) { 
             alert(date.css());
          } 
    });

надеясь, что параметр даты относится к выбранной ячейке, но, похоже, это не работает.

Любое предложение?

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

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

Заранее спасибо.


jquery jquery-ui jquery-ui-datepicker
person MazarD    schedule 25.05.2010    source источник
comment
Если данный ответ работает, отметьте его как ответ, чтобы помочь всем остальным. Это избавляет от повторяющихся вопросов.   -  person dan richardson    schedule 26.05.2010
comment
Я знаю, но я плохо выразился, поэтому я отредактировал вопрос и жду ответов, прежде чем отметить правильный. Спасибо за ответ в любом случае! :D   -  person MazarD    schedule 26.05.2010
comment
К сожалению, я не думаю, что это возможно. У вас есть доступ к обратному вызову onSelect, однако содержимое DatePicker также перерисовывается, и я не знаю, можно ли это остановить. Но новый ответ, который я дал, БУДЕТ работать, если вы сможете остановить перерисовку средства выбора даты.   -  person dan richardson    schedule 26.05.2010

Ответы (4)


arrow_upward
11
arrow_downward

Я думаю, что лучший способ (при условии, что я вас правильно понял) - просто переопределить css.
В таблице стилей вашего сайта или разделе заголовка html вам просто нужно переопределить следующий селектор css.

.ui-datepicker-current-day .ui-state-active { background: #000000; }

ИЗМЕНИТЬ

Имея в виду ваше редактирование, должно работать следующее (при условии, что вы можете заставить средство выбора даты перестать обновляться)

onSelect: function(value, date) {
    date.dpDiv.find('.ui-datepicker-current-day a')
        .css('background-color', '#000000');
}
person dan richardson    schedule 25.05.2010
comment
Но если я сделаю это с переопределением CSS, это не позволит мне иметь несколько ячеек с разными цветами, верно? - person MazarD; 26.05.2010
comment
Пометил ваш ответ как правильный, потому что это наилучшее приближение, в любом случае у меня не получилось перестать обновляться, поэтому я решил написать свой собственный календарь событий. Спасибо за интерес и помощь!! - person MazarD; 27.05.2010
comment
Не беспокойтесь, вы всегда можете взглянуть на очень надежный инструмент datePicker, созданный Кельвином Лаком — kelvinluck. .com/assets/jquery/datePicker - person dan richardson; 27.05.2010
comment
это сработало: jsfiddle.net/abhMH/2, как предлагается здесь: stackoverflow.com/ вопросы/12690626/ - person Stano; 22.07.2013

arrow_upward
1
arrow_downward

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

person Gabriele Petrioli    schedule 25.05.2010
comment
с тем, как css структурирован jQuery css, это будет переопределено, поскольку вышеприведенное равно только 10 с точки зрения значения каскадного порядка css. Для css требуется значение 20 или более (два класса), чтобы переопределить jQuery ui css по умолчанию. - person dan richardson; 25.05.2010

arrow_upward
1
arrow_downward

В моем случае мне нужно удалить активный класс, поэтому:

$("#datepicker").datepicker({
  onSelect: function(dateText, inst) {
    setTimeout(function(){
      inst.dpDiv.find('.ui-datepicker-current-day a').removeClass('ui-state-active');
    }, 50);
  }
});
person Liko    schedule 09.02.2014

arrow_upward
0
arrow_downward

Средство выбора даты по умолчанию следует вашей теме. Но вы можете переопределить что угодно.

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

Итак, сделайте что-то вроде этого:

#ui-datepicker-div .ui-state-active {color: #FFFFCC;}

#ui-datepicker-div .ui-state-highlight {color: #DCDCDC;}

Вы можете добавить этот css на страницу или настроить саму тему.

person Chad Kuehn    schedule 06.03.2012