Twitter Bootstrap의 날짜 범위 선택기의 날짜를 업데이트하십시오.

Question

나는 Dan Grossman에 의해 date range picker을 Twitter 부트 스트랩에 사용하고 있습니다.

초기화 할 때 startDate 및 endDate와 같은 미리 정의 된 값을 설정할 수 있습니다. 나중에 유사한 방식으로 값을 수동으로 업데이트 할 수 있습니까?

내가하고 싶은 일은 미리 저장된 범위를 정의하지 않고 시작일과 종료일을 포함하여 저장 한 필터로 날짜 범위 선택기를 '로드'하는 것입니다. jQuery를 통해 날짜 범위 선택기의 필드를 업데이트해도 실제 달력 선택 항목은 업데이트되지 않습니다.

var reportrange = $('#reportrange').daterangepicker(), 
DateRangePicker = reportrange.data('daterangepicker'); 

하지만, 어떻게 수동으로 선택한 새 날짜와 날짜 범위 선택 도구 및 캘린더를 업데이트 할 DateRangePicker을 사용하기 :

나는 날짜 범위 선택기를 초기화 할 때 나는 이런 식으로 뭔가를해야 할 것 같아요?

Answer 1

이 구성 요소의 최신 버전은 시작/종료 날짜를 업데이트하는 방법을 제공합니다

$("#reportrange").data('daterangepicker').setStartDate(startDate); 
$("#reportrange").data('daterangepicker').setEndDate(endDate); 

당신은 이러한 모든 것을 처리 할로 update 메소드를 직접 호출 할 필요가 없습니다.

Answer 2

나는 올바른 길을 가고있었습니다. 다음과 같은 방법으로 DateRangePicker를 사용하여 날짜를 업데이트 할 수 있습니다.

DateRangePicker.startDate = moment(startDate.toJSON().slice(0, 10), DateRangePicker.format); 
DateRangePicker.endDate = moment(endDate.toJSON().slice(0, 10), DateRangePicker.format); 
DateRangePicker.updateView(); 
DateRangePicker.cb(DateRangePicker.startDate, DateRangePicker.endDate); 
DateRangePicker.updateCalendars(); 

Answer 3

감사합니다. 코드 조각을 사용하면 페이지에서 동적으로 새 기간을 설정할 수 있습니다.

한 가지. 귀하의 방식으로 페이지의 모든 DateRangePickers를 업데이트하는 것으로 보입니다 (둘 이상 있다고 가정).

또한 외부 JS 파일에 플러그인이있는 경우 페이지에서 DateRangePicker 프로토 타입 객체에 액세스 할 수 없습니다.

다음은 jQuery 선택기에 링크 된 것을 업데이트하는 방법입니다.

// Init DateRangePicker 
$('#reportrange').daterangepicker({/* params */}), 
... 

// Update params dynamically after init. 
// In this case, date format has been set to YYYY-MM-DD on init. 
$("#reportrange").data().daterangepicker.startDate = moment('2013-12-24', datepicker.data().daterangepicker.format); 
$("#reportrange").data().daterangepicker.endDate = moment('2013-12-25', datepicker.data().daterangepicker.format); 
$("#reportrange").data().daterangepicker.updateCalendars(); 

Answer 4

Guillaume Lavoie의 답변에 대한 추가 정보 이 코드는 나를 위해 일했다 :

orders = { order_sdate : "2015-01-01", order_edate : "2015-01-20" }; 

jQuery("#order_date").val(order.order_sdate + " - " + order.order_edate); 
jQuery("#order_date").data('daterangepicker').startDate = moment(order.order_sdate, "YYYY-MM-DD"); 
jQuery("#order_date").data('daterangepicker').endDate = moment(order.order_edate, "YYYY-MM-DD"); 
jQuery("#order_date").data('daterangepicker').updateView(); 
jQuery("#order_date").data('daterangepicker').updateCalendars();