简单介绍

官方地址:Date Range Picker — JavaScript Date & Time Picker Library


日期区间选择器,通常用在数据筛选上,如下:


image.png


引入文件

除了必要的 jQuery 以及 bootstrap 之外,还需要引入 1 个 css 文件以及 1 个 js 文件,而涉及到日期的操作,最好还要引入一个库 moment,引入如下:


<!-- daterangepicker -->
<link rel="stylesheet" href="/daterangepicker/daterangepicker.css">

<!-- moment  -->
<script src="/moment/min/moment.min.js"></script>
<!-- bootstrap datepicker -->
<script src="/daterangepicker/daterangepicker.js"></script>


安装依然可以采用 bower 包管理器, bower install --save daterangepicker,截止目前最新版本升级到了 3.0.3,2.x 版本时,名字还带有 bootstrap,所以,也可以采用 bower install --save bootstrap-daterangepicker 安装。注意引入的路径正确即可。 


HTML 部分

这里我提供两种样式,一种是 input 的样式:


<div class="input-group">
  <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
  <input type="text" class="form-control input-sm daterange" name="date" placeholder="" autocomplete="off" required>
</div>


另一种是 button 样式:


<div class="input-group">
  <button type="button" class="btn btn-default btn-sm daterange" data-toggle="tooltip" title="项目开始日期">
    <i class="glyphicon glyphicon-calendar"></i>
    <span>时间</span>
    <i class="glyphicon glyphicon-triangle-bottom"></i>
  </button>
</div>


样式有一些差异,但是我建议采用 button 的样式,因为 button 样式方便自定义。


image.png


JS 调用

官方文档对于参数的介绍还是比较清晰的,这里给我我的一个常用方案:


// dateRange 参数
function dateRangeConfig(startDate, endDate) {
  return {
    startDate: startDate,
    endDate: endDate,
    timePicker: true,
    // minDate: '2018/12',
    // maxDate: moment().format('YYYY/MM/DD'),
    // showDropdowns: true,	// 年份月份下拉选择
    // autoApply: true,
    ranges: {
      '近两月': [moment().subtract(1, 'M').startOf('M'), moment().endOf('M')],
      '本月': [moment().startOf('month'), moment().endOf('month')],
      '上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
      '本季度': [moment().startOf('Q'), moment().endOf('Q')],
      '上季度': [moment().subtract(1, 'Q').startOf('Q'), moment().subtract(1, 'Q').endOf('Q')],
      '今年': [moment().startOf('Y'), moment().endOf('Y')],
      '去年': [moment().subtract(1, 'Y').startOf('Y'), moment().subtract(1, 'Y').endOf('Y')],
    },
    locale: {
      format: 'YYYY/MM/DD',
      applyLabel: "应用",
      cancelLabel: "取消",
      customRangeLabel: "自定义",
      daysOfWeek: ["日", "一", "二", "三", "四", "五", "六"],
      monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"]
    }
  }
}

var $btnDateRange = $('button.daterange');
var $inputDateRange = $('input.daterange');
// 定义默认开始日期 以及 结束日期
var startDate = moment().subtract(1, 'month').startOf('month').format('YYYY/MM/DD'); // 默认近两月;
var endDate = moment().endOf('month').format('YYYY/MM/DD'); // 默认月底;
// 初始化 button 标签
$btnDateRange.find('span').html(startDate + ' - ' + endDate);

// button 类型 daterangepicker
$btnDateRange.daterangepicker(dateRangeConfig(startDate, endDate), function (start, end) {
  $btnDateRange.find('span').html(start.format('YYYY/MM/DD') + ' - ' + end.format('YYYY/MM/DD'));
  startDate = start.format('YYYY/MM/DD');
  endDate = end.format('YYYY/MM/DD');
  // 选择后,触发动作
  alert('You slected ' + startDate + ' - ' + endDate);
});

// input 类型 daterangepicker
$inputDateRange.daterangepicker(dateRangeConfig(startDate, endDate), function (start, end) {
  $inputDateRange.find('span').html(start.format('YYYY/MM/DD') + ' - ' + end.format('YYYY/MM/DD'));
  startDate = start.format('YYYY/MM/DD');
  endDate = end.format('YYYY/MM/DD');
  // 选择后,触发动作
  alert('You slected ' + startDate + ' - ' + endDate);
});


这里介绍几个参数:



另外,提供回调函数的功能,配合前台图表数据筛选,非常实用。