更新Twitter Bootstrap的日期範圍選擇器的選定日期

我使用date range picker作爲Twitter Bootstrap的，由Dan Grossman。更新Twitter Bootstrap的日期範圍選擇器的選定日期

初始化時，可以設置預定義的值，如startDate和endDate。以後可以用類似的方式手動更新這些值嗎？

我想要做的是用我已保存的過濾器「加載」日期範圍選擇器，其中包括開始和結束日期（而不是通過定義預定義的範圍）。只是通過jQuery更新日期範圍選擇器的字段不會更新日曆的實際選擇。

我想初始化的日期範圍選擇器時，我應該做這樣的事情：

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

不過，如何使用DateRangePicker更新日期範圍選擇器和日曆手動新選定的日期？

來源

2013-09-23 Gustav

該組件的最新版本提供了一些方法用於更新的開始/結束日期：

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

你不必自己調用更新方法，因爲這些會處理這一切。

來源

2014-01-27 20:32:24

此組件存在一個奇怪的問題，在選擇範圍內的startdate時，它會自動重置enddate，這真的很糟糕，我看過的東西首次。任何意見？ – shzyincu

我在正確的軌道上。我可以通過以下方式使用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();

來源

2013-09-24 06:18:59 Gustav

我還必須調用DateRangePicker.updateInputText（）來獲取要更新的文本輸入。 – alexp

謝謝。您的一段代碼可以幫助我找到一種在頁面中動態設置新日期範圍的方法。

但有一件事。看來你的方式會更新頁面中的所有DateRangePickers（假設你有多個）。

此外，DateRangePicker原型對象可能無法在您的頁面中訪問（如果插件放置在外部JS文件中）。

這是一種只更新鏈接到您的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();

來源

2013-12-18 20:25:14

我在控制檯中收到此錯誤未捕獲的ReferenceError：未定義daterangepicker –

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

來源

2015-10-13 18:43:07

更新Twitter Bootstrap的日期範圍選擇器的選定日期

回答

相關問題