При помощи jQuery UI Datepicker сделать несколько календарей на странице таким образом, чтобы к каждому можно было применить свой стиль

#javascript #html #jquery_ui #календарь #datepicker

Как на одной Html-странице сделать несколько независимых календарей jQuery UI Datepicker,
чтобы у каждого был свой класс (чтобы к каждому применить свои стили)?
    

Ответы

Ответ 1

Достаточно просто применить к инпутам класс и повесить datepicker на него



$(function() {
  $( ".datepicker" ).datepicker({ dateFormat: "yyyy-mm-dd" });
}); 









Ответ 2

Чтобы изменить оформление для каждого календаря отдельно, потребуется задавать класс
внутри функции beforeShow. При этом сначала придется удалять все возможные "свои" классы,
иначе после открытия всех календарей будут добавлены все классы.



$(function() {
  $(".datepicker").datepicker({
    beforeShow: function(input, inst) {
      inst.dpDiv
        .removeClass('custom1 custom2')
        .addClass($(input).data('dp-class'));
    }
  });
});
#ui-datepicker-div.custom1 {
  background: #ff8;
}
#ui-datepicker-div.custom2 {
  background: #f8f;
}