daterangepicker的使用

daterangepicker 是基于JQuery的时间日期选择插件，是一个配合 bootstrap 框架使用的时间范围选择 js 组件

引入 js 和 css

<link href="bootstrap.min.css">      

<link href="daterangepicker.css">  

<script src="jquery.min.js"></script>  

<script src="bootstrap.min.js"></script>  

<script src="moment.min.js"></script>  

<script src="daterangepicker.js"></script>

html

<form id="searchform">

      <div class="form-group">

           <label>时间：</label>

           <input readonly="readonly" class="form-control" id="timeBox"></input>

      </div>

</form>

js

var startDate,endDate;

默认时间：

startDate = moment().subtract(6, 'days').hours(0).minutes(0).seconds(0).format('YYYY-MM-DD HH:mm:ss');

endDate = moment().hours(23).minutes(59).seconds(59).format('YYYY-MM-DD HH:mm:ss');

$('#timeBox').daterangepicker({

  "startDate": moment().startOf('day'),  

  "endDate": moment(),  

  "minDate": '01/01/2017',    //最小时间  

  "maxDate": moment(), //最大时间  

  "dateLimit": { days: 30 }, //起止时间的最大间隔  

  "showDropdowns": true,

  "showWeekNumbers": false, //是否显示第几周  

  "timePicker": true, //是否显示小时和分钟  

  "timePickerIncrement": 60, //时间的增量，单位为分钟  

  "timePicker12Hour": false, //是否使用12小时制来显示时间

  "timePicker": true,

  "timePicker24Hour": true,

  "timePickerSeconds": true,

  "alwaysShowCalendars": true,

  "opens: 'right', //日期选择框的弹出位置  

  "buttonClasses": ['btn btn-default'],

  "applyClass": 'btn-small btn-primary blue',

  "cancelClass": 'btn-small',

  "format": 'YYYY-MM-DD', //控件中from和to 显示的日期格式  

  "separator": ' - ', //from和to 中间分隔符

  "ranges": {

    '最近1小时': [moment().subtract('hours',1), moment()],  

    '今日': [moment().startOf('day'), moment()],

    '昨日': [moment().subtract('days', 1).startOf('day'), moment().subtract('days', 1).endOf('day')],

    '最近7日': [moment().subtract('days', 6), moment()],

    '最近30日': [moment().subtract('days', 29), moment()]

  },

  "locale": {  // 汉化

    applyLabel: '确定',

    cancelLabel: '取消',

    fromLabel: '起始时间',

    toLabel: '结束时间',

    customRangeLabel: '自定义',

    daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],

    monthNames: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月'],

    firstDay: 1

  }

}, function (start, end, label) {

  $('#timeBox').html(start.format('YYYY-MM-DD HH:mm:ss') + ' - ' + end.format('YYYY-MM-DD HH:mm:ss'));

}, function (start, end, label) {

            setTimeout(() => {

              $('#timeRange').val('');

            })

}, function (start, end, label) {

}()).on('apply.daterangepicker', function (ev, picker) {

            startDate = picker.startDate.format('YYYY-MM-DD HH:mm:ss');

            endDate = picker.endDate.format('YYYY-MM-DD HH:mm:ss');

            $('[name="startTime"]').val(startDate);

            $('[name="endTime"]').val(endDate);

});

更多可参见官方文档：https://www.datetimepicker.cn/daterangepicker/