参数介绍：
| 参数 | 格式 | 示例 | 含义 |
|---|---|---|---|
| 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