Date Range Picker时间段选择 daterangepicker 是用来选择时间段的插件，使用3.0.5版本。 英文文档地址：http://www.daterangepicker.com/ 中文文档地址：https://www.daterangepicker.cn/ github地址：https://github.com/dangrossman/daterangepicker  ```html <input type="text" id="dates" class="form-control" /> ``` ```javascript $('#dates').daterangepicker({ startDate: moment(), endDate: moment().add(2, 'day') }); ``` 上述基本使用的例子中，定义了开始时间和结束时间。 你也可以自定义预设时间范围  ```html <div class="input-group"> <input type="text" id="reportrange" class="form-control" value="" /> <span class="input-group-addon"><i class="mdi mdi-calendar"></i></span> </div> ``` ```javascript // 预定义的日期范围 var start = moment().subtract(29, 'days'); var end = moment(); function cb(start, end) { $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY')); } $('#reportrange').daterangepicker({ startDate: start, endDate: end, ranges: { '今天': [moment(), moment()], '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')], '七天前': [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')] } }, cb); cb(start, end); ``` 其他用法请参考项目中的示例页面或者官方的文档。 插件项目中页面名字：`test_daterangepicker.html` `test_daterangepicker_v4.html` [点击查看 Date Range Picker 插件 在线演示](http://example.itshubao.com/example/109.html "点击查看 Date Range Picker 插件 在线演示") 涉及的文件： - `js/moment/moment.min.js` - `js/moment/locale/zh-cn.js` - `js/bootstrap-daterangepicker/daterangepicker.css` - `js/bootstrap-daterangepicker/daterangepicker.min.js` > 需要注意的是，`moment.min.js` 文件，v3项目中在`/js/bootstrap-datetimepicker/`目录中，v4项目在`/js/momentjs/`目录下。（另外一个需要注意的地方，v4以前目录的名字叫`moment.js`，而因为有 `.` 的存在，在有些编辑器编译打包的时候可能会报错，所以出现这种情况的时候，大家可以改一下这个目录名字，gitee项目上已经修正。）