dateRangePicker时间范围控件

最新推荐文章于 2024-08-23 07:45:44 发布

转载最新推荐文章于 2024-08-23 07:45:44 发布 · 207 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hwaggLee/p/5753924.html

文章标签：

#javascript #ViewUI

本文详细介绍了如何使用 daterangepicker 插件为网页元素创建时间范围控件，包括基本使用方法、参数设置、函数方法及事件触发等。通过示例代码展示了如何初始化插件、设置时间格式、回调函数及响应各种事件。

Github：https://github.com/dangrossman/bootstrap-daterangepicker/

使用daterangepicker()为元素创建一个时间范围控件

<script type="text/javascript">
$(document).ready(function(){
         $('input[name="daterange"]').daterangepicker();
});
</script>

daterangepicker()还可以有个操作对象参数和回调函数。当用户选择时间范围后调用回调函数，参数是monent时间对象的开始时间、结束时间、预定义的范围标签选择。

$('input[name="daterange"]').daterangepicker(
  {
    format: 'YYYY-MM-DD',
    startDate: '2013-01-01',
    endDate: '2013-12-31'
  },
  function(start, end, label) {
    alert('A date range was chosen: ' +start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
  }
);

参数

`startDate`: (Date object, moment object or string) 起始时间
`endDate`: (Date object, moment object or string) 结束时间
`minDate`: (Date object, moment object or string) 可选最早时间
`maxDate`: (Date object, moment object or string) 可选最迟时间
`timePicker`: (boolean) 是否显示time选择
`timePickerIncrement`: (number) time选择递增数
`timePicker12Hour`: (boolean) 是否12小时制
`opens`: (string: 'left'/'right') 显示在元素左边还是右边
`buttonClasses`: (array) 按钮样式
`applyClass`: (string) 应用按钮样式
`cancelClass`: (string) 取消按钮样式
`format`: (string) date/time格式
`separator`: (string) 分隔符
`locale`: (object) 本地设置
`singleDatePicker`: (boolean) 是否是单个时间选择器
`parentEl`: (string) 将控件放到哪个元素内，默认body函数方法

函数方法

`setOptions(object,function)`: 设置操作
`setStartDate(Date/moment/string)`:设置起始时间
`setEndDate(Date/moment/string)`:设置结束时间

事件

`show.daterangepicker`:Triggered when the picker is shown
 `hide.daterangepicker`:Triggered when the picker is hidden
 `apply.daterangepicker`:Triggered when the apply button is clicked
 `cancel.daterangepicker`:Triggered when the cancel button is clicked

转载于:https://www.cnblogs.com/hwaggLee/p/5753924.html