2017-01-16 2 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 + ')"); 
}); 

여기에는 두 가지 기간이 정의되어 있으며 나를 위해 작동하지 않습니다. 캘린더에 사용 가능한 모든 날짜 (날짜 범위)를 한 번 표시하고 싶습니다. 2017년 1월 10일

2 날짜 범위 2017년 1월 20일에 : - - :

1 날짜 범위

처럼 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 + ')"); 
    }); 
관련 문제