日期时间范围选择插件:daterangepicker使用总结(必看篇)

介绍

daterangepicker是一个基于jQuery的日期时间范围选择插件，可以选取时间段，并且可以自定义预设时间段、自定义时间格式、自定义按钮等。

使用步骤

步骤一：引入文件

首先，我们需要引入jQuery库文件和daterangepicker插件文件。

<!-- jQuery库文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- daterangepicker插件文件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-daterangepicker/3.0.5/daterangepicker.css" />
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-daterangepicker/3.0.5/daterangepicker.min.js"></script>

步骤二：创建日期时间选择器

在HTML中创建一个日期时间选择器，输入框的ID可以自由定义。

<input type="text" id="date-range-picker" />

步骤三：调用daterangepicker插件

通过jQuery调用daterangepicker插件，在options中设置各种选项，如日期格式、预设时间段、语言、是否显示时间等。

$(document).ready(function() {
  $('#date-range-picker').daterangepicker({
    locale: {
      format: 'YYYY-MM-DD',
      applyLabel: '确认',
      cancelLabel: '取消',
      weekLabel: '周',
      customRangeLabel: '自定义范围',
      daysOfWeek: ['日','一','二','三','四','五','六'],
      monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
      firstDay: 1
    },
    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')]
    },
    alwaysShowCalendars: true,
    startDate: moment(),
    endDate: moment().add(1, 'days'),
    timePicker: true,
    timePickerIncrement: 10,
    timePicker24Hour: true,
    opens: 'right'
  }, function(start, end, label) {
    console.log(start.format('YYYY-MM-DD HH:mm:ss') + ' - ' + end.format('YYYY-MM-DD HH:mm:ss'));
  });
});

步骤四：获取选中的日期时间

当用户点击“确认”按钮或者手动选择某个时间段后，回调函数会返回开始时间和结束时间，我们可以将它们用作筛选条件或者进行其他操作。

$(document).ready(function() {
  $('#date-range-picker').daterangepicker({
    // options
  }, function(start, end, label) {
    var startTime = start.format('YYYY-MM-DD HH:mm:ss');
    var endTime = end.format('YYYY-MM-DD HH:mm:ss');
    console.log(startTime + ' - ' + endTime);
    // 在这里可以进行一些操作，比如传递参数到后端进行筛选；
    // 或者更新画面，展示刚刚选择的时间段数据。
  });
});

示例

示例一：基本使用

使用默认选项创建一个日期选择器。

$(document).ready(function() {
  $('#date-range-picker').daterangepicker();
});

示例二：指定日期格式并限制日期范围

指定日期时间格式为YYYY-MM-DD，并且只允许选择今天之前的时间。

$(document).ready(function() {
  $('#date-range-picker').daterangepicker({
    format: 'YYYY-MM-DD',
    maxDate: moment().subtract(1, 'days')
  });
});

结语

通过对daterangepicker插件的使用总结，我们可以方便地实现日期时间范围选择功能，并且可以自定义选项以满足不同需求。