$("#datepicker").datepicker({maxDate:new Date()});

endDate:'+1',//结束时间，在这时间之后都不可选

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>

1. <span style="font-size:14px;"><div class="col-md-6 cy-text-right-md">
2. <div class="form-inline">
3. <div class="form-group cy-mar-ver-s">
4. <span class="cy-pad-hor-s">最后接入时间</span>
5. </div>
6. <div class="input-daterange input-group" id="datepicker">
7. <input type="text" class="form-control" name="start" id="qBeginTime" />
8. <span class="input-group-addon">至</span>
9. <input type="text" class="form-control" name="end" id="qEndTime" />
10. </div>
11. <div class="form-group cy-mar-ver-s">
12. <button class="btn btn-primary cy-pad-rgt-s" onclick="javascript:doQuery();" type="button">搜索</button>
13. </div>
14. </div>
15. </div></span>

1. <span style="font-size:14px;"> //开始时间：
2. $('#qBeginTime').datepicker({
3. todayBtn : "linked",
4. autoclose : true,
5. todayHighlight : true,
6. endDate : new Date()
7. }).on('changeDate',function(e){
8. var startTime = e.date;
9. $('#qEndTime').datepicker('setStartDate',startTime);
10. });
11. //结束时间：
12. $('#qEndTime').datepicker({
13. todayBtn : "linked",
14. autoclose : true,
15. todayHighlight : true,
16. endDate : new Date()
17. }).on('changeDate',function(e){
18. var endTime = e.date;
19. $('#qBeginTime').datepicker('setEndDate',endTime);
20. });</span>