Месяцы настройки в JQuery UI DatePicker

Question

Мне нужно настроить каждый месяц в пользовательском интерфейсе DatePicker. Это означает, что для каждого месяца будет отображаться разное фоновое изображение. Я думаю сделать следующее:

<div class="calendar-container CURRENT-MONTS-CLASS"><div id="datepicker"></div></div>

Как я могу получить название текущего месяца и добавить его в качестве класса в контейнер DatePicker?

Очень ценю любую помощь!

Answer 1

Вы можете использовать номер месяца, например, .month1 - .month12 или .monthJanuary - .monthDecember (или какой-либо другой формат) для этого ... лично я бы придерживался чисел для других культур, но выМожно адаптировать этот ответ для обоих способов.Используйте onChangeMonthYear событие средства выбора даты следующим образом:

$('#datepicker').datepicker({
   onChangeMonthYear: function(year, month, inst) { 
       //Month number (1-12) is month
       //Month name you can get by $("#datepicker .ui-datepicker-month").text()
       $(this).closest("div.calendar-container")
              .removeClass().addClass("calendar-container month" + month);
   }
});

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

$("div.calendar-container").addClass("month" + ($('#datepicker').datepicker("getDate").getMonth()+1));

Если вместо этого вы используете имена, используйте:

$("div.calendar-container").addClass("month" + $("#datepicker .ui-datepicker-month").text());

Какой бы вариант вы ни выбрали, просто создайте 12 классов с помощьюфоновые изображения / стили, которые вы хотите. Вы можете проверить это здесь .Если вы хотите, чтобы фон на самом деле был в самом указателе даты, а не .calendar-container <div>, просто добавьте его в селектор CSS, чтобы сделать его более конкретным, например:

.month1 .ui-datepicker-inline { background: url(January.jpg); }

Вы можете проверить эту версию здесь .