您现在的位置是:技术博客 > 前端前端 日期插件Daterangepicker Lucas2020-12-05 14:11【代码】936人已围观 简介daterangepicker是Bootstrap的一个时间组件,使用很方便,用于选择日期范围的JavaScript组件,设计用于Bootstrap CSS框架。 这款插件在web后台使用率很高,<a href="http://bsify.admui.com/daterangepicker/" target='_blank'>官网</a>有文档,想看更多的配置用法,一定得看官方文档。当然网上也有各种教程,但总感觉不够直接,不够实用。我这里整理了一份案例代码,效果图中的大概涵盖了基本常用的场景。 #### 直接先看效果图  #### 实现代码如下 ``` <!DOCTYPE html> <html> <head> <title>daterangepicker</title> <!-- 需要引用的依赖库 --> <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css"/> <!-- 引用 daterangepicker 相关文件--> <script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css"/> </head> <body style="margin: 20px 0"> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="form-group"> <label for="startDate">选择某天(年月日)</label> <input type="text" class="form-control" id="SingleDay1" value=""> </div> <div class="form-group"> <label for="startDate">选择某天的某时间(年月日时分秒)</label> <input type="text" class="form-control" id="SingleTime1" value=""> </div> <div class="form-group"> <label for="parentEl">选择从某天 ~ 某天(年月日)</label> <input type="text" class="form-control" id="ChooseRangeDay1" value=""> </div> <div class="form-group"> <label for="parentEl">选择从某天 ~ 某天(年月日,含快捷方式)</label> <input type="text" class="form-control" id="ChooseRangeDay2" value=""> </div> <div class="form-group"> <label for="startDate">选择从某天某时间 ~ 某天某时间(年月日时分秒)</label> <input type="text" class="form-control" id="ChooseRangeTime1" value=""> </div> </div> </div> </div> </body> <script type="text/javascript"> // 单日期选择,如:2020-01-01 $('#SingleDay1').daterangepicker({ locale: { format: 'YYYY-MM-DD', daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'], // 自定义周几的名称 monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月' ], // 自定义月份的名称 }, singleDatePicker: true, //开启单日历 showDropdowns: true, //可下拉选择年,月 maxDate: moment(new Date()), //设置最大日期为今天 minDate: '2018-11-15', //设置最小日期,如:2020-12-01,2020-01等格式 opens: 'right', //插件打开时的位置,默认“right”,可选:“left”,“center”,“right” drops: 'down', //插件打开时的位置,默认“down”,可选:“up”,“down” }, function (start, end, label) { //选择日期后的回调 console.log(start.format('YYYY-MM-DD')) console.log(end.format('YYYY-MM-DD')) console.log(label) }); // 单日期年月日时分秒选择,如:2020-01-01 01:02:03 $('#SingleTime1').daterangepicker({ locale: { format: 'YYYY-MM-DD HH:mm:ss', applyLabel: "确定", cancelLabel: "取消", resetLabel: "重置", daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'], // 自定义周几的名称 monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月' ], // 自定义月份的名称 }, singleDatePicker: true, //开启单日历 showDropdowns: true, //可下拉选择年,月 maxDate: moment(new Date()), //设置最大日期为今天 minDate: '2018-11-15', //设置最小日期,如:2020-12-01,2020-01等格式 opens: 'right', //插件打开时的位置,默认“right”,可选:“left”,“center”,“right” drops: 'down', //插件打开时的位置,默认“down”,可选:“up”,“down” timePicker: true, //显示时间 timePicker24Hour: true, //时间制 timePickerSeconds: true, //时间显示到秒 ,false则只显示到分 startDate: moment().hours(0).minutes(0).seconds(0), //设置开始日期 endDate: moment(new Date()), //设置结束器日期 }, function (start, end, label) { //选择日期后的回调 console.log(start.format('YYYY-MM-DD')) console.log(end.format('YYYY-MM-DD')) console.log(label) }); // 从哪一天选择至哪一天,含快捷方式,如:2013-01-01 - 2013-12-31 $('#ChooseRangeDay2').daterangepicker({ locale: { format: 'YYYY-MM-DD', separator: " - ", applyLabel: "确定", cancelLabel: "取消", resetLabel: "重置", fromLabel: "起始时间", toLabel: "结束时间'", customRangeLabel: "自定义", weekLabel: "W", daysOfWeek: ["日", "一", "二", "三", "四", "五", "六"], monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], firstDay: 1 }, ranges: { '今日': [moment(), moment()], '昨日': [moment().subtract(1, 'days'), moment().subtract(1, 'days')], '最近7日': [moment().subtract(6, 'days'), moment()], '最近30日': [moment().subtract(29, 'days'), moment()], '本月': [moment().startOf('month'), moment().endOf('month')], '上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')], '今年': [moment().startOf('year'), moment().endOf('year')], }, alwaysShowCalendars: true, startDate: moment().subtract(6, 'days'), //7天前 endDate: new Date(), //现在 opens: "right", }, function (start, end, label) { console.log(start.format('YYYY-MM-DD')) console.log(end.format('YYYY-MM-DD')) console.log(label) }); // 从哪一天选择至哪一天,如:2013-01-01 - 2013-12-31 $('#ChooseRangeDay1').daterangepicker({ locale: { format: 'YYYY-MM-DD', //设置显示格式 applyLabel: '确定', //确定按钮文本,默认是“Apply” cancelLabel: '取消', //取消按钮文本,默认是“Cancel” resetLabel: "重置", separator: " ~ ", daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'], // 自定义周几的名称 monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月' ], // 自定义月份的名称 maxDate: moment(new Date()), //设置最大日期 opens: "center", }, }, function (start, end, label) { alert("选中: " + start.format('YYYY-MM-DD') + ' 到 ' + end.format('YYYY-MM-DD')); }); // 从某天某时间选择至某天某时间,如:2013-01-01 - 2013-12-31 $('#ChooseRangeTime1').daterangepicker({ locale: { format: 'YYYY-MM-DD HH:mm:ss', //设置显示格式 applyLabel: '确定', //确定按钮文本,默认是“Apply” cancelLabel: '取消', //取消按钮文本,默认是“Cancel” daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'], // 自定义周几的名称 monthNames: [ '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月' ], // 自定义月份的名称 firstDay: 1, "opens": "center", }, timePicker: true, //显示时间 timePicker24Hour: true, //时间制 timePickerSeconds: true, //时间显示到秒 startDate: moment().hours(0).minutes(0).seconds(0), //设置开始日期 endDate: moment(new Date()), //设置结束器日期 }, function (start, end, label) { alert("选中: " + start.format('YYYY-MM-DD HH:mm:ss') + ' 到 ' + end.format('YYYY-MM-DD HH:mm:ss')); }); </script> </html> ``` #### 参数配置 ``` // 创建一个新的日期范围选择器 $('#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按钮被点击时触发事件 ``` 转载:感谢您对Lucas个人博客网站平台的认可,非常欢迎各位朋友分享到个人站长或者朋友圈,但转载请说明文章出处“来源Lucas个人博客”。 很赞哦! ( 0 ) 上一篇:有趣的js插件 下一篇:日期插件Datetimepicker 相关文章 ueditor工具栏浮动bug 有趣的js插件 动态DOM的事件绑定 推荐一个炫酷的背景插件 点击排行 生活不止眼前的苟且,还有诗和远方 十年一觉电影梦 奥地利基茨比厄尔 禅修治愈身心 自律成就自我 零边际成本社会 Modern PHP 鸟哥的Linux私房菜 本栏推荐 要技术,更要有创意 定时任务 Curl无法发送https请求 Lnmp环境搭建 常用的SQL函数 Windows的cmd指令 ueditor工具栏浮动bug 有趣的js插件 标签云 git laravel swoole javascript vue ajax html css sql linux docker flask django nginx apache thinkphp markdown sublime wechat layui photoshop nodejs mysql windows composer java maven springboot mybatis IDE 猜你喜欢 Swoole 基础篇一(初识) PHP进程管理器 正则的快速上手 Sublime代码格式化 Lnmp环境搭建 高并发库存防控超量 Linux之top命令 常用的SQL函数 站点信息 建站时间:2018-05-01 在线人数:1人 文章统计:263篇 总浏览量:222624次 统计数据:百度统计 个人信息:扫描二维码查看