bootstrap-daterangepicker插件运用
引入:daterangepicker.css、daterangepicker.js、moment.js、moment.min.js
链接:https://files.cnblogs.com/files/kitty-blog/moment.min.js、https://files.cnblogs.com/files/kitty-blog/moment.js、https://files.cnblogs.com/files/kitty-blog/daterangepicker.js、https://files.cnblogs.com/files/kitty-blog/daterangepicker.css
/**初始化 Daterangepicker 插件 */ function initDaterangepicker() {$('.daterangepicker').daterangepicker({"showDropdowns": true,"showWeekNumbers": false,"showISOWeekNumbers": false,"timePicker": true,"timePicker24Hour": true,"timePickerSeconds": false,"autoApply": false,"locale": {"direction": "ltr","format": "YYYY-MM-DD HH:mm","separator": " 至 ","applyLabel": "确定","cancelLabel": "取消","fromLabel": "From","toLabel": "To","daysOfWeek": ["周六","周一","周二","周三","周四","周五","周日"],"monthNames": ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],"firstDay": 1},"alwaysShowCalendars": false,"parentEl": "daterangepicker","startDate": moment(),"endDate": moment(),"minDate": false,"maxDate": "05/28/2050","applyClass": "btn-green btn-outline","cancelClass": "btn-default btn-outline","opens": "center","drops": "down"}, function (start, end, label) {console.log("New date range selected: " + start.format('YYYY-MM-DD HH:mm') + " to " + end.format('YYYY-MM-DD HH:mm') + " (predefined range: " + label + ")");$("#startTime").val(start.format('YYYY-MM-DD HH:mm'));$("#endTime").val(end.format('YYYY-MM-DD HH:mm'));}); } /**初始化 datetimepicker 日期 插件*/ function initDatepicker(defaultStartDate, defaultEndDate) {var now = new Date();//date + timevar picker1 = $('.datetimepicker-startdate').datetimepicker({format: 'YYYY-MM-DD',locale: moment.locale('zh-cn'),defaultDate: defaultStartDate,minDate: false,maxDate: false,ignoreReadonly: true,allowInputToggle: true,icons: {time: 'fa fa-clock-o',date: 'fa fa-calendar',up: 'fa fa-chevron-up',down: 'fa fa-chevron-down',previous: 'fa fa-chevron-left',next: 'fa fa-chevron-right',today: 'fa fa-crosshairs',clear: 'fa fa-trash'}});var picker2 = $('.datetimepicker-enddate').datetimepicker({format: 'YYYY-MM-DD',locale: moment.locale('zh-cn'),defaultDate: defaultEndDate,minDate: defaultStartDate,maxDate: false,ignoreReadonly: true,allowInputToggle: true,icons: {time: 'fa fa-clock-o',date: 'fa fa-calendar',up: 'fa fa-chevron-up',down: 'fa fa-chevron-down',previous: 'fa fa-chevron-left',next: 'fa fa-chevron-right',today: 'fa fa-crosshairs',clear: 'fa fa-trash'}});//动态设置最小值 picker1.on('dp.change', function (e) {picker2.data('DateTimePicker').minDate(e.date);});//动态设置最大值 picker2.on('dp.change', function (e) {picker1.data('DateTimePicker').maxDate(e.date);}); } /**初始化 datetimepicker 时间 插件*/ function initTimepicker(defaultStartTime, defaultEndTime) {var now = new Date();// only timevar picker1 = $('.datetimepicker-starttime').datetimepicker({format: 'LT',locale: moment.locale('zh-cn'),defaultDate: defaultStartTime == "" ? 5 : defaultStartTime,minDate: false,maxDate: false,ignoreReadonly: true,allowInputToggle: true,});var picker2 = $('.datetimepicker-endtime').datetimepicker({format: 'LT',locale: moment.locale('zh-cn'),defaultDate: defaultEndTime == "" ? 21 : defaultEndTime,minDate: defaultStartTime,maxDate: false,ignoreReadonly: true,allowInputToggle: true,});//动态设置最小值 picker1.on('dp.change', function (e) {picker2.data('DateTimePicker').minDate(e.date);});//动态设置最大值 picker2.on('dp.change', function (e) {picker1.data('DateTimePicker').maxDate(e.date);}); }
转载于:https://www.cnblogs.com/kitty-blog/p/9583635.html
bootstrap-daterangepicker插件运用相关推荐
- bootstrap select 插件两级联动
2019独角兽企业重金招聘Python工程师标准>>> bootstrap select 插件两级联动 插件地址:http://silviomoreto.github.io/boot ...
- Bootstrap 轮番插件Collapse 调用方式
调用方式 1.JavaScript调用 JavaScript调用轮番其实很简单,只需在脚本中调用 carousel() 方法即可.格式为: $('.carousel').carousel(); Boo ...
- Bootstrap 轮番插件
轮番 Bootstrap轮番插件Carousel是一个灵活的.响应式的.无缝循环播放的幻灯片切换插件,它的内容可以是图片.视频.或者其他任何内容. Bootstrap轮番插件Carousel需要 bo ...
- Bootstrap 折叠插件Collapse 选项
选项 Bootstrap折叠插件Collapse有2 个选项,一个是parent,一个是toggle,所有的选项都可以通过 data 属性或JavaScript进行设置.见表 5‑7. 表 5‑7 B ...
- Bootstrap 折叠插件Collapse 调用方式
调用方式 Bootstrap折叠插件Collapse的结构相对复杂,但调用比较简单,可以通过data属性调用,也可以通过JavaScript调用. 1.data 属性调用 要激活折叠插件的激活行为,首 ...
- Bootstrap 折叠插件
折叠 当列表菜单的条目特别多,而页面空间有限时,使用类似于手风琴的折叠菜单是不错的选择,因为它可以节约页面空间,方便用户浏览. 折叠插件需要 bootstrap-collapse.js 文件支持,在使 ...
- Bootstrap 工具提示插件Tooltip 的选项
选项 Bootstrap为工具提示插件提供了 8 个选项,所有的选项都可以通过 data 属性或JavaScript进行设置.见表 5‑4: 表 5‑4 tooltip插件的选项 名称 类型 默认值 ...
- Bootstrap 工具提示插件
工具提示 当鼠标移动到特定元素上时,显示相关的提示信息,比如给出链接说明或缩写词的全称等,是一个非常人性化的功能. HTML本身就支持这样的功能,只需给任何元素添加 title 属性,当鼠标悬停时,浏 ...
- php 使用上传文件预览插件,bootstrap fileinput插件实现预览上传照片功能方法详解...
本文主要介绍了bootstrap fileinput插件实现预览上传照片功能,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友可以参考下,希望能帮助到大家. 效果图如下所示: 具体代码如下: cl ...
- Bootstrap Bootstrap表格插件bootstrap-table配置与应用小结
Bootstrap表格插件bootstrap-table配置与应用小结 by:授客 QQ:1033553122 1. 测试环境 win7 JQuery-3.2.1.min.js 下载地址: h ...
最新文章
- setTimeOut与 setInterval区别
- Savitzky-Golay 滤波器详解及C/matlab语言程序设计
- Python自动化运维工具-Fabric部署及使用总结
- renameto 阻塞_打造简化版文件下载器
- mPaas 运维流程介绍
- 程序员是如何评价“双十一”的?
- 代码覆盖度-NCover监控IIS和exe,结果分析
- 无法显示隐藏文件的解决方法
- 7-12 藏头诗 (15 分)
- Linux内核中的xx_initcall
- 素数判定 [2009年哈尔滨工业大学计算机研究生机试真题]
- JavaWeb——servlet介绍
- 腾讯看点基于 Flink 的实时数仓及多维实时数据分析实践
- 使用 Visual Studio 发布 .NET 控制台应用程序
- word双栏添加右栏下脚注而左栏满字方法
- python进程间通信时间开销_python 进程间的通信
- 振荡次数计算机控制系统,计算机控制第四章.ppt
- 为了庆祝五一国际劳动节的到来
- 美国计算机科学排,美国大学计算机科学computer science专业排名
- RabbitMQ的持久化