uid-datepicker

$("#txtPODate").daterangepicker({
singleDatePicker: true,
showDropdowns: true,
minDate:'01/01/2012',
maxDate:'01/01/2015'
});

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

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

 

https://github.com/uxsolutions/bootstrap-datepicker

-------------

https://www.cnblogs.com/echo2016/p/5416572.html

----------------------

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>

 

bootstrap-datepicker限定可选时间范围

http://blog.csdn.net/biedazhangshu/article/details/50727005

一、应用场景

实际应用中可能会根据日期字段查询某个日期范围内的数据，则需要对日期选择器可选时间进行限制，

如：开始时间不能大于结束时间，结束时间不能小于开始时间，此时就要为开始日期选择器和结束日期选择器动态的设置startDate和endDate的值。

 

二、相关知识点

1、bootstrap-datepicker的初始化

引入bootstrap-datepicker.js和bootstrap-datepicker.css

bootstrap-datepicker配置参数的了解

2、boostrap-datepicker的changeDate事件：日期改变时触发

3、bootstrap-datepicker的setEndDate和setStartDate方法

4、详细配置参见官方文档http://bootstrap-datepicker.readthedocs.org/en/latest/methods.html

三、应用实例

1、JSP中，声明日期选择器

 

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

 

 

 

2、JS中，对日期选择器进行初始化和配置

 

             <span style="font-size:14px;"> //开始时间：
$('#qBeginTime').datepicker({
    todayBtn : "linked",
    autoclose : true,
    todayHighlight : true,
    endDate : new Date()
}).on('changeDate',function(e){
    var startTime = e.date;
    $('#qEndTime').datepicker('setStartDate',startTime);
});
//结束时间：
$('#qEndTime').datepicker({
    todayBtn : "linked",
    autoclose : true,
    todayHighlight : true,
    endDate : new Date()
}).on('changeDate',function(e){
    var endTime = e.date;
    $('#qBeginTime').datepicker('setEndDate',endTime);
});</span>

 

3、效果图