如何在 daterangepicker 和其他日期中显示多个日期范围（可用日期）应该被禁用答案

【问题标题】：How to show mutliple date ranges (available dates) in daterangepicker and other dates should be disabled如何在 daterangepicker 和其他日期中显示多个日期范围（可用日期）应该被禁用
【发布时间】：2017-01-16 10:08:22
【问题描述】：

我正在制作一个应用程序，其中我必须在 daterangepicker 中显示多个可用日期（日期范围），并且应相应地禁用其他日期。目前我正在使用http://www.daterangepicker.com/#options，这是我的示例代码。

$('#config-demo').daterangepicker({
"ranges": { 
            "Range1":  ["01/10/2017T07:37:40.792Z","01/10/2017T07:37:40.792Z"],
            "Range2": ["01/20/2017T07:37:40.792Z","01/30/2017T07:37:40.792Z"]
          },
 "linkedCalendars": false,
 "autoUpdateInput": true,
 "showCustomRangeLabel": false,
 "alwaysShowCalendars": true,
 "startDate": "01/10/2017",
 "endDate": "01/16/2017"
}, function(start, end, label) {
   console.log("New date range selected: ' + start.format('YYYY-MM-DD') + '  to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')");
});

在此我定义了两个日期范围，但它不适合我。我想在日历中显示一次所有可用的日期（日期范围）。喜欢

第一个日期范围：- 2017 年 1 月 10 日至 2017 年 1 月 20 日

第二个日期范围：- 2017 年 1 月 25 日至 2017 年 1 月 30 日

这些日期应该在一个日历中。

【问题讨论】：

标签： jquery datepicker jquery-ui-datepicker daterangepicker

【解决方案1】：

我已经创建了相同的功能，这里是一个示例代码：-

var date_ranges = {

"staff_availabilities":[ 

    {"available_from":"2017/01/12","available_to":"2017/01/28","availibility_id":1},
    {"available_from":"2017/01/21","available_to":"2017/02/19","availibility_id":1}
]
};

var i = 0;

var f_data = [];
var obj = {};

$.each(date_ranges.staff_availabilities, function( index, value ) {

   var start_date = value.available_from;
   var end_date = value.available_to;
   var start_date_range = moment(start_date, "YYYY/MM/DD HH:mm:ss").format('MMMM D, Y');
   var end_date_range = moment(end_date, "YYYY/MM/DD HH:mm:ss").format('MMMM D, Y');
   obj[start_date_range+" - "+end_date_range] = [value.available_from , value.available_to];

   i++;

});

$('#config-demo').daterangepicker({
        "ranges":obj,
        "linkedCalendars": false,
        "autoUpdateInput": true,
        "showCustomRangeLabel": false,
        "alwaysShowCalendars": true,
        locale: {
          format: 'YYYY-MM-DD'
        },
        "startDate": mini_date,
        "endDate": max_date
    }, function(start, end, label) {
      console.log("New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')");
    });

【讨论】：