2017-01-16 66 views
0

我在做,我都必須表現daterangepicker和其他日期多的可用日期(日期範圍),應禁用相應的應用程序。目前我使用http://www.daterangepicker.com/#options這裏是我的示例代碼。如何顯示在daterangepicker複式日期範圍(可用日期)和其他日期應禁用

$('#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 + ')"); 
}); 

在這個我已經定義了兩個日期範圍和它不是爲​​我工作。我想告訴所有可用的時間(日期範圍)一次日曆。 像

1日期範圍: - 2017年1月10日至2017年1月20日

2日的日期範圍: - 2017年1月25日至2017年1月30日

這些日期應該是在一個日曆。

回答

0

我已經創建了一個同樣在這裏的功能是一個示例代碼: -

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