更新 Twitter 引导程序的日期范围选择器的选定日期
Update the selected dates of date range picker for Twitter Bootstrap
我正在使用Dan Grossman的Twitter Bootstrap的日期范围选择器。
初始化后,可以设置预定义的值,如开始日期和结束日期。以后是否可以以类似的方式手动更新值?
我想做的是使用我保存的过滤器"加载"日期范围选择器,其中包括开始和结束日期(而不是通过定义预定义的范围)。仅通过 jQuery 更新日期范围选取器的字段不会更新日历的实际选择。
我想在初始化日期范围选择器时我应该做这样的事情:
var reportrange = $('#reportrange').daterangepicker(),
DateRangePicker = reportrange.data('daterangepicker');
但是,如何使用日期范围选择器手动使用新选择的日期更新日期范围选择器和日历?
此组件的最新版本提供了更新开始/结束日期的方法:
$("#reportrange").data('daterangepicker').setStartDate(startDate);
$("#reportrange").data('daterangepicker').setEndDate(endDate);
您不必自己调用更新方法,因为它们将处理所有这些。
我走在正确的轨道上。我可以通过以下方式使用日期范围选择器来更新日期:
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();
谢谢。您的代码段帮助我找到一种在页面中动态设置新日期范围的方法。
不过有一件事。似乎您的方式会更新页面中的所有日期范围选择器(假设您有多个)。
此外,日期范围选择器原型对象可能无法在您的页面中访问(如果插件放置在外部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();
纪
尧姆·拉瓦伊答案的其他信息。这段代码对我有用:
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();
这对我有用:)
// 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();
相关文章:
- jquery日期选择器年份范围默认值
- jquery日期选择器失去了交互性
- 正在搜索JavaScript日期选择器滑块
- 如何在多个jQueryUI日期选择器中屏蔽特定日期
- jquery日期选择器显示与值不同的文本
- JQuery UI日期选择器:在选择出发日期时自动弹出返回日期
- Angular UI启动日期选择器问题
- 奇怪的日期选择器行为,与模糊有关
- 我希望这个日期选择器可以从1990年到2000年之间的年份中选择日期
- keith wood日期选择器日期格式和语言
- 在日期更改后更新Angular UI引导程序日期选择器选项
- Jquery UI日期选择器不关注输入
- Javascript两个日期选择器冲突
- 动态添加的标记不会'无法正确使用日期选择器
- 日期选择器无法使用javascript显示
- AngularJS自定义日期选择器指令
- 他们网站上的代码出现启动日期选择器错误
- 从第一个日期选择器定义第二个日期选择器的开始日期
- 更改日期选择器格式
- 带有推特助推器的日期选择器出现了,但没有't更改日期