daterangepicker bootstarp 日期范围选择控件使用注意事项

bug1

老版本1.3.21 里面 timePicker: true, 不配置的话.

 ranges: {
                '清空': [null, null],
                '今天': [moment().hour(4).minutes(0).seconds(0), moment().endOf('day')]
                ],

今天是从 0点开始的. 不会从4点开始.无论你怎么写.都是0点加上timePicker:true就好了

显示时间部分是显示24小时,还是12小时.
新版本里的配置项是
timePicker24Hour: true
老版本里的配置项是
timePicker12Hour: false

下面贴一下我的配置

/**
* 初始化日期范
* 围选择控件
*/
function InitDateRangeControlForQueryPanel(daterangebtn) {
  var $daterangebtn = $(daterangebtn);

  $daterangebtn.daterangepicker(
      {
          timePicker: true,
          timePicker12Hour: false, //24小时 老版本
          timePicker24Hour: true, //24小时 新版本
          timePickerSeconds:true,
          startOfWeek: 'monday', 
          ranges: {
              '清空': [null, null],
              '今天': [moment().hour(4).minutes(0).seconds(0), moment().endOf('day')],
              '昨天': [moment().subtract(1, 'days').startOf('day'), moment().subtract(1, 'days').endOf('day')],
              '7天':  [moment().subtract(7, 'days').startOf('day'), moment().endOf('day')],
              '15天': [moment().subtract(15, 'days').startOf('day'), moment().endOf('day')],
              '30天': [moment().subtract(30, 'days').startOf('day'), moment().endOf('day')],
              '这个月': [moment().startOf('month').startOf('day'), moment().endOf('month').endOf('day')],
              '上个月': [moment().subtract(1, 'month').startOf('month').startOf('day'), moment().subtract(1, 'month').endOf('month').endOf('day')]
          },
          opens: 'right', //日期选择框的弹出位置
          //buttonClasses: ['btn btn-default'],
          //applyClass: 'btn-small btn-primary blue',
          //cancelClass: 'btn-small',
          time: {
              enabled: true 
          },
          format: 'YYYY-MM-DD HH:mm:ss', //控件中from和to 显示的日期格式
          //pickTime: true,
          locale: {
              applyLabel: '确定',
              cancelLabel: '取消',
              fromLabel: '起始时间',
              toLabel: '结束时间',
              customRangeLabel: '自定义',
              daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
              monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
                  '七月', '八月', '九月', '十月', '十一月', '十二月'],
              firstDay: 1
          },
          startDate: moment().hours(4).minutes(0).seconds(0), //startDate和endDate 的值如果跟 ranges 的两个相同则自动选择ranges中的行. 这里选中了清空行
          endDate: moment().endOf('day')
      },
      function (start, end) {

          var s = start.format('YYYY-MM-DD HH:mm');
          var e = end.format('YYYY-MM-DD HH:mm');
          var t = s + ' 至 ' + e;

          if (start._isValid == false && end._isValid == false) {
              s = "";
              e = "";
              t = "请选择日期范围"
          }

          $daterangebtn.find('span').html(t);
          $daterangebtn
          .next().val(s)
          .next().val(e);
      }
  );
}

使用示例

<div class="input-group"> 
  <button type="button" class="btn btn-default pull-right" id="bgtime-daterange-btn">
      <i class="fa fa-calendar"></i><span> 请选择时间范围 </span>
     <i class="fa fa-caret-down"></i>
   </button>

   <input name="QF|bgtime|GET" type="hidden" class="from" />
   <input name="QF|bgtime|LET" type="hidden" class="to" />
 </div>

<script>
InitDateRangeControlForQueryPanel('#bgtime-daterange-btn') ; 
</script>