11

我正在使用Dan Grossman的 Twitter Bootstrap的日期范围选择器。

初始化时，可以设置预定义值，如 startDate 和 endDate。以后是否可以以类似的方式手动更新值？

我想要做的是用我保存的过滤器“加载”日期范围选择器，其中包括开始和结束日期（不是通过定义预定义的范围）。仅通过 jQuery 更新日期范围选择器的字段不会更新日历的实际选择。

我想在初始化日期范围选择器时我应该这样做：

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

但是，如何使用 DateRangePicker 手动更新日期范围选择器和日历与新选择的日期？

4

5 回答 5

26

该组件的最新版本提供了更新开始/结束日期的方法：

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

您不必自己调用更新方法，因为它们会处理所有这些。

于 2014-01-27T20:32:24.427 回答
5

我走在正确的轨道上。我可以通过以下方式使用 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-24T06:18:59.710 回答
3

谢谢。您的一段代码帮助我找到一种在页面中动态设置新日期范围的方法。

不过有一件事。看来您的方式会更新页面中的所有 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-18T20:25:14.860 回答
3

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-13T18:43:07.450 回答
-1

这对我有用:)

// 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();
于 2019-12-21T08:43:17.237 回答