как отключить определенный диапазон дат в bootstrap daterangepicker?

Question

Я хочу отключить определенный диапазон дат в bootstrap daterangepicker.

Мне нужно использовать bootstrap daterangepicker, который предоставляет мне возможность ограничения определенного диапазона дат.

Answer 1

Чтобы отключить даты, используйте datesDisabled method для обеспечения массива.

Некоторые даты отключены в this CodePen.

$("#picker").datepicker({ 
    datesDisabled:["11/24/2016","11/28/2016","12/02/2016","12/23/2016"] 
}); 

---

EDIT

Предыдущий ответ был для Bootstap DatePicker ...
Извините за разночтений, мой плохой.

Вот что я нашел для Bootstrap DateRangePicker:

// Define the disabled date array 
var disabledArr = ["11/24/2016","11/28/2016","12/02/2016","12/23/2016"]; 

$("#picker").daterangepicker({ 

    isInvalidDate: function(arg){ 
     console.log(arg); 

     // Prepare the date comparision 
     var thisMonth = arg._d.getMonth()+1; // Months are 0 based 
     if (thisMonth<10){ 
      thisMonth = "0"+thisMonth; // Leading 0 
     } 
     var thisDate = arg._d.getDate(); 
     if (thisDate<10){ 
      thisDate = "0"+thisDate; // Leading 0 
     } 
     var thisYear = arg._d.getYear()+1900; // Years are 1900 based 

     var thisCompare = thisMonth +"/"+ thisDate +"/"+ thisYear; 
     console.log(thisCompare); 

     if($.inArray(thisCompare,disabledArr)!=-1){ 
      console.log("  ^--------- DATE FOUND HERE"); 
      return true; 
     } 
    } 

}).focus(); 

Это работает в this CodePen.

---

EDIT для бонусного вопроса о в комментариях;)

Выше, является рисовать календарь с датами инвалидов.
Теперь вам нужно сравнить выбранный диапазон снова, на Применить (когда пользователь выбрал диапазон), чтобы запретить диапазон, который будет включать некоторые отключенные даты.

Так вот дополнительная функция:

$("#picker").on("apply.daterangepicker",function(e,picker){ 

    // Get the selected bound dates. 
    var startDate = picker.startDate.format('MM/DD/YYYY') 
    var endDate = picker.endDate.format('MM/DD/YYYY') 
    console.log(startDate+" to "+endDate); 

    // Compare the dates again. 
    var clearInput = false; 
    for(i=0;i<disabledArr.length;i++){ 
     if(startDate<disabledArr[i] && endDate>disabledArr[i]){ 
      console.log("Found a disabled Date in selection!"); 
      clearInput = true; 
     } 
    } 

    // If a disabled date is in between the bounds, clear the range. 
    if(clearInput){ 

     // To clear selected range (on the calendar). 
     var today = new Date(); 
     $(this).data('daterangepicker').setStartDate(today); 
     $(this).data('daterangepicker').setEndDate(today); 

     // To clear input field and keep calendar opened. 
     $(this).val("").focus(); 
     console.log("Cleared the input field..."); 

     // Alert user! 
     alert("Your range selection includes disabled dates!"); 
    } 
}); 

См improved CodePen here.

Answer 2

Ответ Louys Patrice Bessette является удивительным.

Я просто хочу сделать его более точным, потому что я обнаружил 1 ошибку, что он не предупреждает, когда вы выбираете дату начала и дату окончания в другом месяце и дату перехода между ними. Причина здесь

startDate<disabledArr[i] && endDate>disabledArr[i] 

вам нужно разобрать для объекта Date перед сравнением или он будет ложным, как это

startDate = new Date(picker.startDate.format('MM/DD/YYYY')) 
endDate = new Date(picker.endDate.format('MM/DD/YYYY')) 

похож на сегодняшний день инвалидов в disableArr

Спасибо