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>