DatePicker как календарь только для чтения

Question

У меня есть приложение, где основные объекты имеют поле с несколькими интервалами дат (в течение одного месяца).

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

Мне удалось настроить Jquery.ui.DatePicker в встроенном режиме .. но я не нахожу способ подавать его в разные диапазоны данных ... чтобы покрасить выходные и отметить определенные даты, такие как СЕЙЧАС, и Индивидуальные праздники.

$('.date-pick').datePicker({ 
    inline:true, 
    language:'en', 
    dateFormat: 'dd-mm-yy', 
}); 

Я пытался setDate .. но не может найти способ, чтобы установить интервалы, и указать цвета или стили.

Answer 1

Вы можете настроить таргетинг на классы, которые добавляет jQuery UI Datepicker для изменения цветов.

За выходные:

.ui-datepicker-week-end, .ui-datepicker-week-end a.ui-state-default { 
    color: Red; 
} 

Разметка на выходные на JQuery UI Datepicker выглядит следующим образом:

<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="0" data-year="2015"> 
    <a class="ui-state-default" href="#">#DAYNUMBER</a> 
</td> 

Для конкретных дат и диапазонов дат:

JS

var SelectedDates = {}; 
SelectedDates[new Date("January 11, 2015")] = new Date("January 11, 2015"); 
SelectedDates[new Date("January 30, 2015")] = new Date("January 30, 2015"); 

var startDate = new Date("January 14, 2015"); 
var endDate = new Date("January 21, 2015"); 

$("input").datepicker({ 
    inline:true, 
    language:'en', 
    dateFormat: 'dd-mm-yy', 
    beforeShowDay: function(date) { 
     var holiday = SelectedDates[date]; 
     if (holiday) { 
      return [true, "holiday", holiday]; 
     } 
     else if (date >= startDate && date <= endDate) { 
      return [true, 'holiday-range', holiday]; 
     } 
     else { 
      return [true, '', '']; 
     } 
    } 
});  

CSS

.holiday a.ui-state-default { 
    background-color: Green; 
    background-image: none; 
    color: White; 
} 

.holiday-range a.ui-state-default { 
    background-color: Purple; 
    background-image: none; 
    color: White; 
} 

DEMO

Ссылки:
show weekend
highlight specific dates