bootstrap中日历范围选择插件daterangepicker的使用详解
daterangepicker是bootstrap的一个日历插件 主要用来选择时间段的插件 这个插件很好用 也很容易操作
引入相关插件
<!-- 需要引用的依赖库 --> <script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" rel="external nofollow" /> <!-- 引用 daterangepicker 相关文件--> <script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" rel="external nofollow" />
需要的元素添加该插件的调用方法:
$('input[name="daterange"]').daterangepicker();
您可以通过参数自定义相关配置,还可以通过回调函数在用户选择新的日期时获得通知。
$('input[name="daterange"]').daterangepicker({ locale: { format: 'YYYY-MM-DD' }, startDate: '2013-01-01', endDate: '2013-12-31' }, function(start, end, label) { alert("A new date range was chosen: " + start.format ('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD')); });
其中这些配置可以组成一个配置为文件 然后再()中引入
$('input[name=dateStr]', '#themeAddPage').daterangepicker(dateRangePickerAfterTodayConfig);
配置文件
var dateLongRangePickerOptionObj = { minDate: '2015/01/01 00:00:00', //最小时间 showDropdowns: true, showWeekNumbers: false, //是否显示第几周 dateLimit: {days: 300}, //起止时间的最大间隔 timePicker: true, timePickerIncrement: 1, //时间的增量,单位为分钟 timePicker12Hour: false, opens: 'right', //日期选择框的弹出位置 buttonClasses: ['btn btn-default'], applyClass: 'btn-small btn-primary blue', cancelClass: 'btn-small', format: 'YYYY/MM/DD HH:mm:ss', //控件中from和to 显示的日期格式MM/DD/YYYY separator: '-', defaultDate: new Date(), locale: { applyLabel: '确定', cancelLabel: '取消', fromLabel: '起始时间', toLabel: '结束时间', daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'], monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'], firstDay: 1 } }
配置选项,方法和事件
配置选项
startDate: (Date 对象, moment 对象或者string类型)初始化日期范围选中的开始时间。 endDate: (Date 对象, moment 对象或者string类型)初始化日期范围选中的结束时间。 minDate: (Date 对象, moment 对象或者string类型) 用户可以选择的最早时间。 maxDate: (Date 对象, moment 对象或者string类型) 用户可以选择的最晚时间。 dateLimit: (object类型) 选中的开始和结束日期之间最大时间间隔。可以是能够添加到moment对象(moment.add())中的任何属性(如:days, months)。 showDropdowns: (boolean类型) 在日历上面显示年和月的下拉框,选中后将跳到指定的年和月 showWeekNumbers: (boolean类型) 在日历上每周开始的地方显示本地化的周编号。 showISOWeekNumbers: (boolean类型) 在日历上每周开始的地方显示国际标准的周编号。 timePicker: (boolean类型) 允许选择日期和时间,而不是局限于日期。 timePickerIncrement: (number类型) 时间选择框中分钟列的增加步长(如:设置为30后只允许选择以0和30结束的时间)。 timePicker24Hour: (boolean类型) 使用24小时制来代替12小时制,同时删除AM/PM选择框。 timePickerSeconds: (boolean类型) 在时间选择框中显示秒选择列。 ranges: (object类型) 设置用户可以选择的预定义日期范围。每个键名即范围的标签名,对应值是两个日期组成的数组,来表示范围的界限。 showCustomRangeLabel: (boolean类型) 当使用范围选项时,在预定义范围列表的末尾显示标记为"Custom Range"的标签。当选择的日期范围与任何一个预定义的范围都不匹配时,该选项将被高亮显示。单击它显示日历可以选择新的范围。 alwaysShowCalendars: (boolean类型) 通常,如果使用范围选项指定了预定义日期范围,则用户除了单击 "Custom Range"之外,日期选择器都不会显示用于选择自定义日期范围的日历。当选项设置为true时,将始终显示用于选择自定义日期范围的日历。 opens: (string: 'left'/'right'/'center') 设置日期选择器以绑定元素左对齐、右对齐或者居中显示。 drops: (string: 'down' or 'up') 设置日期选择器在绑定元素的下面(默认)或者上面显示。 buttonClasses: (array类型)为日期选择器中的所有button元素添加CSS类。 applyClass: (string类型) 为日期选择器中的apply按钮添加类。 cancelClass: (string类型) 为日期选择器中的cancel按钮添加类。 locale: (object类型) 允许为按钮和标签提供本地化的字符串,自定义日期格式,并更改日历中周的第一天。 查看配置生成器中的“locale配置(包含设置示例)”,以了解如何自定义这些选项。 singleDatePicker: (boolean类型) 只显示一个日历来选择一个日期,而不是带有两个日历的范围选择器;回调函数中提供的开始和结束日期将和选择的单个日期相同。 autoApply: (boolean类型) 隐藏apply和cancel按钮。选择两个日期或预定义范围时,会自动应用新的日期范围。 linkedCalendars: (boolean类型) 启用时,显示的两个日历将始终为两个连续的月份(如:1月和2月),并且当单击日历上方的左侧或右侧箭头时,两个日历都将变化。 禁用时,两个日历可以单独变化并显示任何月/年。 isInvalidDate: (function类型) 在显示两个日历之前传递一个日期参数,然后通过返回true或false,标示该日期是否可供选择。 isCustomDate: (function类型) 在显示两个日历之前传递一个日期参数,然后将返回的CSS类名字符串传或者数组应用在日历中的该日期上。 autoUpdateInput: (boolean类型) 标示日期范围选择器是否应在初始化和所选日期改变时,自动更新绑定在<input>元素上的值。 parentEl: (string类型) 给日期选择器添加父元素的jQuery选择器,如果没有提供,body将被作为父元素。
方法
您可以使用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的使用详解 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- .img/.hdr格式转.nii格式的操作
- PHP实现的操作数组类库定义与用法示例
- python使用nibabel和sitk读取保存nii.gz文件实例
- PHP从尾到头打印链表实例讲解
- python如何写try语句
- python怎么判断素数
- php数组遍历类与用法示例
- PHP格式化显示时间date()函数代码
- python操作微信自动发消息的实现(微信聊天机器人)
- 使用ITK-SNAP进行抠图操作并保存mask的实例
- Yii2框架加载css和js文件的方法分析
- php 与 nginx 的处理方式及nginx与php-fpm通信的两种方式
- python如何求圆的面积
- php实现微信公众号企业转账功能
- PHP通过调用新浪API生成t.cn格式短网址链接的方法详解