Выберите диапазон дат и выделение в jQuery Datepicker

Question

Я пытаюсь выделить или изменить CSS диапазона дат в jQuery Datepicker. Я хочу, чтобы пользователь мог нажимать дату начала и дату окончания, а также выделять все даты между этими диапазонами. Я смог создать массив дат в этом диапазоне при нажатии, но по какой-то причине я не могу добавить к нему класс для изменения CSS.

Как я могу взять этот массив дат, а затем добавить для них класс CSS для изменения фона/выделения?

Любая помощь была бы принята с благодарностью!

Благодаря

Answer 1

ИТАК если вы уже имеете выбранный пользователем даты в массиве. Вы можете использовать опцию 'beforeShowDay', чтобы указать функцию, которая будет проходить через каждый день в видимый месяц, ваша функция может затем сравнить каждую дату с вашим массивом и применить класс css, где есть совпадение.

Так, например, инициализировать DatePicker как так ...

jQuery(".cal").datepicker({ 
    beforeShowDay: checkDates 
}) 

и функция checkDates() будет выглядеть следующим образом (предполагается, что ваш массив называется dateArray ....

function checkDates(theDate){ 
    for(i=0;i<dateArray.length;i++){ 
     if(dateArray[i].valueOf()===thedate.valueOf()){ 
      return [false,"cssClass","title"]; 
     }else return [true,""] 
    } 
}) 

Это применит класс 'cssClass' к дате, если дата содержится в датеArray

Истинный/ложный бит в операторе return определяет, можно ли выбрать дату, и бит, обозначенный «title», является атрибутом заголовка html (tooltip)

Nb. Это сравнивает даты с ближайшей миллисекундой, поэтому вы можете изменить ее так, чтобы она соответствовала дням.

Answer 2

Я сделал это успешно с datepicker для даты и даты для даты, поэтому я изменил ее на один датпикер , Вот код:

$(function() { 
       var today = new Date(); 
       var thisYear = (today).getFullYear(); 
       var fromDate = '1/1/2000' //this is the initial from date to set the datepicker range 
       var toDate = '1/7/2000' // this is the initial to date to set the datepicker range 

//... initialize datepicker.... 
     }, 
     beforeShowDay: function(date){ 
      //if the date is in range 
      if (date >= fromDate && date <= toDate) { 
       return [true, 'ui-individual-date', '']; //applies a css class to the range 
      } 
      else { 
       return [true, '', '']; 
       } 
     }, 
     onSelect: function (dateText, obj) { 

    //sets the new range to be loaded on refresh call, assumes last click is the toDate    
     fromDate = toDate; 
     toDate = new Date(dateText); 

     $(".classDp1").datepicker("refresh"); 
     $(".classDp2").datepicker("refresh"); 
     }, 

Каждый раз при обновлении функции beforeShowDay вызывается с новым FromDate и Todate диапазона. Наличие переменных вне функции и их модификация позволяет подсвечивать css для каждого клика.