jQuery 更新 Twitter Bootstrap 的日期范围选择器的选定日期
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18955397/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Update the selected dates of date range picker for Twitter Bootstrap
提问by Gustav
I'm using the date range pickerfor Twitter Bootstrap, by Dan Grossman.
我正在使用Dan Grossman 的Twitter Bootstrap日期范围选择器。
When initialized, it's possible to set pre-defined values like startDate and endDate. Is it possible to update the values manually later on in a similar way?
初始化时，可以设置预定义的值，如 startDate 和 endDate。以后是否可以以类似的方式手动更新值？
What I want to do is to "load" the date range picker with filters I have saved, which includes a start and end date (not by defining pre-defined ranges). Just updating the field of the date range picker through jQuery won't update the actual selection of the calendar.
我想要做的是使用我保存的过滤器“加载”日期范围选择器，其中包括开始和结束日期（而不是通过定义预定义的范围）。只是通过 jQuery 更新日期范围选择器的字段不会更新日历的实际选择。
I guess I should do something like this when initializing the date range picker:
我想我应该在初始化日期范围选择器时做这样的事情：
var reportrange = $('#reportrange').daterangepicker(),
DateRangePicker = reportrange.data('daterangepicker');
But then, how to use DateRangePicker to update the date range picker and calendar with new selected dates manually?
但是，如何使用 DateRangePicker 手动更新日期范围选择器和日历与新选择的日期？
回答by Dan Grossman
The latest version of this component provides methods for updating the start/end date:
此组件的最新版本提供了更新开始/结束日期的方法：
$("#reportrange").data('daterangepicker').setStartDate(startDate);
$("#reportrange").data('daterangepicker').setEndDate(endDate);
You don't have to call the update methods yourself as these will handle all that.
您不必自己调用更新方法，因为它们将处理所有这些。
回答by Gustav
I was on the right track. I could use DateRangePicker in the following way to update the dates:
我走在正确的轨道上。我可以通过以下方式使用 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();
回答by Guillaume Lavoie
Thanks. Your piece of code help me to find a way to set a new date range dynamically in the page.
谢谢。您的一段代码帮助我找到了一种在页面中动态设置新日期范围的方法。
One thing though. It seems that your way would update all DateRangePickers in the page (assuming you have more than one).
不过有一件事。似乎您的方式会更新页面中的所有 DateRangePickers（假设您有多个）。
Also, the DateRangePicker prototype object might no be accessible in your page ( if plugin placed in an external JS file ).
此外，DateRangePicker 原型对象可能无法在您的页面中访问（如果插件放置在外部 JS 文件中）。
Here is a way to update only the one linked to your jQuery selector.
这是一种仅更新链接到 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();
回答by ?zgür F?rat ?zpolat
additional information for Guillaume Lavoie's answer. This code worked for me:
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();
回答by Atul Kumar Shukla
This works for me :)
这对我有用:)
// 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();
