引入: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插件运用相关推荐

  1. bootstrap select 插件两级联动

    2019独角兽企业重金招聘Python工程师标准>>> bootstrap select 插件两级联动 插件地址:http://silviomoreto.github.io/boot ...

  2. Bootstrap 轮番插件Collapse 调用方式

    调用方式 1.JavaScript调用 JavaScript调用轮番其实很简单,只需在脚本中调用 carousel() 方法即可.格式为: $('.carousel').carousel(); Boo ...

  3. Bootstrap 轮番插件

    轮番 Bootstrap轮番插件Carousel是一个灵活的.响应式的.无缝循环播放的幻灯片切换插件,它的内容可以是图片.视频.或者其他任何内容. Bootstrap轮番插件Carousel需要 bo ...

  4. Bootstrap 折叠插件Collapse 选项

    选项 Bootstrap折叠插件Collapse有2 个选项,一个是parent,一个是toggle,所有的选项都可以通过 data 属性或JavaScript进行设置.见表 5‑7. 表 5‑7 B ...

  5. Bootstrap 折叠插件Collapse 调用方式

    调用方式 Bootstrap折叠插件Collapse的结构相对复杂,但调用比较简单,可以通过data属性调用,也可以通过JavaScript调用. 1.data 属性调用 要激活折叠插件的激活行为,首 ...

  6. Bootstrap 折叠插件

    折叠 当列表菜单的条目特别多,而页面空间有限时,使用类似于手风琴的折叠菜单是不错的选择,因为它可以节约页面空间,方便用户浏览. 折叠插件需要 bootstrap-collapse.js 文件支持,在使 ...

  7. Bootstrap 工具提示插件Tooltip 的选项

    选项 Bootstrap为工具提示插件提供了 8 个选项,所有的选项都可以通过 data 属性或JavaScript进行设置.见表 5‑4: 表 5‑4 tooltip插件的选项 名称 类型 默认值 ...

  8. Bootstrap 工具提示插件

    工具提示 当鼠标移动到特定元素上时,显示相关的提示信息,比如给出链接说明或缩写词的全称等,是一个非常人性化的功能. HTML本身就支持这样的功能,只需给任何元素添加 title 属性,当鼠标悬停时,浏 ...

  9. php 使用上传文件预览插件,bootstrap fileinput插件实现预览上传照片功能方法详解...

    本文主要介绍了bootstrap fileinput插件实现预览上传照片功能,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友可以参考下,希望能帮助到大家. 效果图如下所示: 具体代码如下: cl ...

  10. Bootstrap Bootstrap表格插件bootstrap-table配置与应用小结

    Bootstrap表格插件bootstrap-table配置与应用小结   by:授客 QQ:1033553122 1.   测试环境 win7 JQuery-3.2.1.min.js 下载地址: h ...

最新文章

  1. setTimeOut与 setInterval区别
  2. Savitzky-Golay 滤波器详解及C/matlab语言程序设计
  3. Python自动化运维工具-Fabric部署及使用总结
  4. renameto 阻塞_打造简化版文件下载器
  5. mPaas 运维流程介绍
  6. 程序员是如何评价“双十一”的?
  7. 代码覆盖度-NCover监控IIS和exe,结果分析
  8. 无法显示隐藏文件的解决方法
  9. 7-12 藏头诗 (15 分)
  10. Linux内核中的xx_initcall
  11. 素数判定 [2009年哈尔滨工业大学计算机研究生机试真题]
  12. JavaWeb——servlet介绍
  13. 腾讯看点基于 Flink 的实时数仓及多维实时数据分析实践
  14. 使用 Visual Studio 发布 .NET 控制台应用程序
  15. word双栏添加右栏下脚注而左栏满字方法
  16. python进程间通信时间开销_python 进程间的通信
  17. 振荡次数计算机控制系统,计算机控制第四章.ppt
  18. 为了庆祝五一国际劳动节的到来
  19. 美国计算机科学排,美国大学计算机科学computer science专业排名
  20. RabbitMQ的持久化

热门文章

  1. Java并发编程实战 第14章 构建自定义的同步工具
  2. 使用jd-gui+javassist修改已编译好的class文件
  3. DockPanel 类
  4. 【Daily Scrum】12-08
  5. Thinking in C++遇到的函数指针及应用
  6. 数据结构之头结点链表的三种插入方式(头插法,尾插法,在pos处插入)
  7. 有前途的人工智能大数据分析相关职业:Python数据科学入门之路
  8. 树形控件(CTreeCtrl和CTreeView)
  9. 国产毫米波雷达领域的领头羊,木牛科技将在明年量产77GHz汽车雷达
  10. php动态获取函数参数