Zaktualizuj wybrane daty wyboru zakresu dat na Twitterze Bootstrap

Question

Używam date range picker dla Twitter Bootstrap, przez Dan Grossman.

Po zainicjowaniu możliwe jest ustawienie wstępnie zdefiniowanych wartości, takich jak startDate i endDate. Czy można później ręcznie zaktualizować wartości w podobny sposób?

Co chcę zrobić, to "załadować" selektor zakresu dat z zapisanymi przeze mnie filtrami, który zawiera datę początkową i końcową (a nie definiując wstępnie zdefiniowane zakresy). Aktualizowanie pola wyboru zakresu dat przez jQuery nie spowoduje aktualizacji faktycznego wyboru kalendarza.

Chyba powinienem zrobić coś takiego podczas inicjalizacji selektora zakresu dat:

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

Ale potem, jak korzystać DateRangePicker aktualizować selektor zakresu dat i kalendarz z nowymi wybranych terminach ręcznie?

Answer 1

Najnowsza wersja tego komponentu zapewnia metody aktualizowania daty rozpoczęcia/zakończenia:

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

Nie musisz zadzwonić do metod aktualizacji siebie jak będą one obsługiwać wszystko.

Answer 2

Byłem na dobrej drodze. Mogę użyć DateRangePicker w następujący sposób, aby zaktualizować daty:

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

Dzięki. Twój fragment kodu pomoże mi znaleźć sposób dynamicznego ustawiania nowego zakresu dat na stronie.

Jedno jednak. Wygląda na to, że na twojej drodze zaktualizowałbyś wszystkie DateRangePickers na stronie (zakładając, że masz więcej niż jeden).

Również obiekt prototypowy DateRangePicker może nie być dostępny na twojej stronie (jeśli wtyczka została umieszczona w zewnętrznym pliku JS).

Oto sposób na aktualizację tylko jednego powiązanego z selektorem 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

dodatkowe informacje dla odpowiedzi Guillaume Lavoie. Ten kod pracował dla mnie:

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();