日期范围选择控件 ：daterangepicker

daterangepicker是一个配合bootstrap框架使用的时间范围选择js组件，可以选择起始时间，可以自定义时间段。

1、引入js和css：

<link href="bootstrap.min.css">      
<link href="daterangepicker-bs3.css">  
  
<script src="jquery.min.js"></script>  
<script src="bootstrap.min.js"></script>  
<script src="moment.min.js"></script>  
<script src="daterangepicker.js"></script>  

2、html

<div class="input-group">
  <span class="input-group-addon">注册时间</span>
  <input type="text" class="form-control daterange"  style="min-width:200px;">
</div>

3、js

$('#id').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小时制来显示时间  
  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()]
  },
  //opens: 'right', //日期选择框的弹出位置  
  //buttonClasses: ['btn btn-default'],
  //applyClass: 'btn-small btn-primary blue',
  //cancelClass: 'btn-small',
  //format: 'YYYY-MM-DD', //控件中from和to 显示的日期格式  
  //separator: ' - ', //from和to 中间分隔符
  locale: {  //汉化
    applyLabel: '确定',
    cancelLabel: '取消',
    fromLabel: '起始时间',
    toLabel: '结束时间',
    customRangeLabel: '自定义',
    daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
    monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
      '七月', '八月', '九月', '十月', '十一月', '十二月'],
    firstDay: 1
  }
}, function (start, end, label) {//格式化日期显示框，默认MM/DD/YYYY
  $('#id').html(start.format('YYYY-MM-DD HH:mm:ss') + ' - ' + end.format('YYYY-MM-DD HH:mm:ss'));
});  

4、效果图

daterangepicker.png

欢迎评论指正，转载请标明出处。