daterangepickerと他の日付の複数の日付範囲（利用可能な日付）を表示する方法

Question

私は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 + ')"); 
}); 

これで私は2つの日付範囲を定義しており、それは私にとっては機能しません。私はすべての利用可能な日付（日付範囲）をカレンダーに1回表示したいと思います。 2017年1月30日

に2017年1月25日 - ：2017年1月10日

2017年1月20日に第二日付範囲 - ：

第一日付範囲と同様に これらの日付は1カレンダーにする必要があります。

Answer 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 + ')"); 
    });