更新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的日期范围选择器的选定日期

回答

相关问题