您可以使用setStartDate和setEndDate方法以程序化的方式更新日期选择器中的startDate和endDate。 您也可以通过绑定到该元素上的data属性访问日期范围选择器对象及其功能和属性。
setStartDate(Date 对象, moment 对象或者string类型): 设置日期范围选择器中当前选择的开始日期为提供的日期 setEndDate(Date 对象, moment 对象或者string类型): 设置日期范围选择器中当前选择的结束日期为提供的日期
示例用法：
// 创建一个新的日期范围选择器 $('#daterange').daterangepicker({ startDate: '03/05/2005', endDate: '03/06/2005' }); // 改变日期选择器中选中的日期范围 $('#daterange').data('daterangepicker').setStartDate('03/01/2014'); $('#daterange').data('daterangepicker').setEndDate('03/31/2014');
事件
日期选择器绑定的元素可以触发以下几个事件，这些事件，您都可以进行监听。
show.daterangepicker: 日期选择器显示后触发事件 hide.daterangepicker: 日期选择器隐藏后触发事件 showCalendar.daterangepicker: 日历显示后触发事件 hideCalendar.daterangepicker: 日历隐藏后触发事件 apply.daterangepicker: apply按钮被点击，或者预定义范围标签被点击时触发事件 cancel.daterangepicker: cancel按钮被点击时
触发事件
有些应用需要“清除”而不是“取消”功能，这可以通过更改按钮标签监听cancel事件来实现：
$('#daterange').daterangepicker({ locale: { cancelLabel: 'Clear' } }); $('#daterange').on('cancel.daterangepicker', function(ev, picker) { $('#daterange').val(''); });
向构造函数传一个回调函数作为参数是监听所选日期范围更改最简单的方法 ，即使选择未更改，每次应用按钮被点击时，您也可以执行某些操作：
$('#daterange').daterangepicker(); $('#daterange').on('apply.daterangepicker', function(ev, picker) { console.log(picker.startDate.format('YYYY-MM-DD')); console.log(picker.endDate.format('YYYY-MM-DD')); });
总结
以上所述是小编给大家介绍的bootstrap中日历范围选择插件daterangepicker的使用详解 ，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: