bootstarp daterangepicker 清空日期,汉化,非常简单.

bootstarp daterangepicker 是非常不错的日期范围选择控件. 作为查询条件非常不错.
但是却默认没有带清空功能. 经过小小的研究, 竟然解决了.

<script>
/**
* 初始化日期范围选择控件
*/
function InitDateRangeControlForQueryPanel(daterangebtn) {
 var $daterangebtn = $(daterangebtn);
 $daterangebtn.daterangepicker(
   {
       ranges: {
           '清空': [null, null],
           '今天': [moment(), moment().add(1, 'days')],
           '昨天': [moment(), moment().subtract(1, 'days')],
           '7天': [moment().subtract(7, 'days'), moment()],
           '30天': [moment().subtract(30, 'days'), moment()],
           '这个月': [moment().startOf('month'), moment().endOf('month')],
           '上个月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
       },
       opens: 'right', //日期选择框的弹出位置
       //buttonClasses: ['btn btn-default'],
       //applyClass: 'btn-small btn-primary blue',
       //cancelClass: 'btn-small',
       format: 'YYYY-MM-DD HH:mm:ss', //控件中from和to 显示的日期格式
       locale: {
           applyLabel: '确定',
           cancelLabel: '取消',
           fromLabel: '起始时间',
           toLabel: '结束时间',
           customRangeLabel: '自定义',
           daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
           monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
               '七月', '八月', '九月', '十月', '十一月', '十二月'],
           firstDay: 1
       },
       startDate: null, //startDate和endDate 的值如果跟 ranges 的两个相同则自动选择ranges中的行. 这里选中了清空行
       endDate: null
   },
   function (start, end) {
       var s = start.format('YYYY-MM-D');
       var e = end.format('YYYY-MM-D');
       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);
   }
 );
}
</script>

下面是如何使用

 <div class="input-group">

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

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

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