Date Range Picker时间段选择

daterangepicker 是用来选择时间段的插件，使用3.0.5版本。

英文文档地址：http://www.daterangepicker.com/

中文文档地址：https://www.daterangepicker.cn/

github地址：https://github.com/dangrossman/daterangepicker

<input type="text" id="dates" class="form-control" />

$('#dates').daterangepicker({ 
    startDate: moment(), 
    endDate: moment().add(2, 'day')
});

上述基本使用的例子中，定义了开始时间和结束时间。

你也可以自定义预设时间范围

<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>

// 预定义的日期范围
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 插件 在线演示

涉及的文件：

• 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项目上已经修正。）