快速上手日期插件daterangepicker
参数介绍：
| 参数 | 格式 | 示例 | 含义 |
|---|---|---|---|
| startDate | MM/DD/YYYY | “startDate”:”10/14/2017” | 设置默认的开始日期 |
| endDate | MM/DD/YYYY | “endDate”:”10/22/2017” | 设置默认的结束日期 |
| minDate | MM/DD/YYYY | “minDate”:”10/14/1995” | 设置最小可用日期 |
| maxDate | MM/DD/YYYY | “maxDate”:”10/14/2017” | 设置最大可用日期 |
| autoApply | true/false | 默认值：false | 不用点击Apply或者应用按钮就可以直接取得选中的日期 |
| singleDatePicker | true/false | 默认值：false | 设置为单个的datepicker，而不是有区间的datepicker |
| singleDatePicker | true/false | 默认值：false | 设置为单个的datepicker，而不是有区间的datepicker |
| showDropdowns | true/false | 默认值：false | 当设置值为true的时候，允许年份和月份通过下拉框的形式选择 |
| timePicker | true/false | 默认值：false | 可选中时分 |
| timePicker24Hour | true/false | 默认值：false | 设置小时为24小时制 |
| timePickerSeconds | true/false | 默认值：false | 可选中秒 |
| opens | 可选值：right left center | 默认值：center | 设置datepicker面板防止的位置：左边、右边或者中间 |
| drops | 可选值：down up | 默认值：down | 设置面板防止的位置：input输入框上面或者input输入框下面 |
| locale | 本地配置 | ||
| locale.applyLabel | 确认按钮文字 | ||
| locale.cancelLabel | 取消按钮文字 | ||
| locale.format | 格式 |
详细例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css"/> <link href="http://cdn.bootcss.com/bootstrap-daterangepicker/2.1.25/daterangepicker.css" rel="stylesheet"> <script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> <script type="text/javascript" src="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap-daterangepicker/2.1.25/moment.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap-daterangepicker/2.1.25/daterangepicker.js"></script> </head> <body> <div class="input-group"> <button type="button" class="btn btn-default pull-right" id="daterange-btn"> <i class="fa fa-calendar"></i> <span>时间</span> <i class="fa fa-caret-down"></i> </button> </div> <script> function init() { //定义locale汉化插件 var locale = { "format": 'YYYY-MM-DD', "separator": " -222 ", "applyLabel": "确定", "cancelLabel": "取消", "fromLabel": "起始时间", "toLabel": "结束时间'", "customRangeLabel": "自定义", "weekLabel": "W", "daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"], "monthNames": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], "firstDay": 1 }; //初始化显示当前时间 $('#daterange-btn span').html(moment().subtract('hours', 1).format('YYYY-MM-DD') + ' - ' + moment().format('YYYY-MM-DD')); //日期控件初始化 $('#daterange-btn').daterangepicker( { 'locale': locale, showDropdowns:true, autoApply:true, //汉化按钮部分 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')] }, startDate: moment(), endDate: moment(), minDate:'2000-01-01', maxDate:moment(), }, function (start, end) { $('#daterange-btn span').html(start.format('YYYY-MM-DD') + ' - ' + end.format('YYYY-MM-DD')); } ); }; $(document).ready(function() { init(); }); </script> </body> </html>
问题以及小BUG修复(可以看看):https://www.cnblogs.com/gtlm/p/7719739.html
