Aggiorna le date selezionate del selettore dell'intervallo di date per Twitter Bootstrap

Question

Sto utilizzando il date range picker per Twitter Bootstrap, per Dan Grossman.

Quando inizializzato, è possibile impostare valori predefiniti come startDate e endDate. È possibile aggiornare i valori manualmente in un secondo momento in modo simile?

Quello che voglio fare è "caricare" il selettore dell'intervallo di date con i filtri che ho salvato, che include una data di inizio e di fine (non definendo intervalli predefiniti). L'aggiornamento del campo del selettore dell'intervallo di date tramite jQuery non aggiornerà la selezione effettiva del calendario.

Credo che dovrei fare qualcosa di simile durante l'inizializzazione la data di Intervallo selettore:

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

Ma allora, come utilizzare DateRangePicker per aggiornare il selettore intervallo di date e calendario con nuove date selezionate manualmente?

Answer 1

L'ultima versione di questo componente fornisce i metodi per l'aggiornamento del data di inizio/fine:

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

Non è necessario chiamare i metodi di aggiornamento, dato che questi si occuperà di tutto il resto.

Answer 2

Ero sulla strada giusta. Potrei usare DateRangePicker nel modo seguente per aggiornare le date:

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

Grazie. Il tuo pezzo di codice mi aiuta a trovare un modo per impostare dinamicamente un nuovo intervallo di date nella pagina.

Una cosa però. Sembra che il tuo modo di aggiornare tutti i DateRangePickers nella pagina (supponendo che ne hai più di uno).

Inoltre, l'oggetto prototipo DateRangePicker potrebbe non essere accessibile nella pagina (se il plug-in è inserito in un file JS esterno).

Ecco un modo per aggiornare solo quello collegato al selettore 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

ulteriori informazioni per la risposta di Guillaume Lavoie. Questo codice ha funzionato per me:

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