bootstrap-daterangepicker是基于bootstrap的一个双日历插件，用于选择日期范围，因原插件不符合项目的实际情况，因此在不影响原插件的使用下，对插件进行部分修改及功能拓展。下面说明一下更改和拓展的部分：
更改：
1、更改了插件的布局和样式
2、隐藏了原插件左边对日期范围的快捷选择部分（如：今天、明天、未来7天等），快捷选择放到了外部日期选择的右侧
3、可在日期选择器下实时展示当前选择的日期区间并可点击进行快速更改。
4、插件已做了汉化处理，无需再初始化汉化
拓展：
1、增加了切换年份的入口
先上效果图：
插件原效果：
上代码：
引入文件：
html:
<div class="input-group fl" style="width: 200px;">
<button type="button" class="btn btn-default form-control daterange-btn" id="daterange-btn">
<span></span>
<i class="glyphicon glyphicon-calendar pl-10 pr-10"></i>
</button>
<input type="hidden" value="" id="incomeStartDate">
<input type="hidden" value="" id="incomeEndDate">
</div>
<p class="timeSlot fl">
<span class="slot" onclick="choseTimeSlot(this, 0)">昨日</span>
<span class="slot" onclick="choseTimeSlot(this, 1)">今日</span>
<span class="slot active" onclick="choseTimeSlot(this, 2)">近三天</span>
</p>
</div>
css:
<style>
.fl{
float: left;
}
.main{
margin: 50px;
}
.timeSlot{
line-height: 30px;
}
.slot{
margin-left: 20px;
cursor: pointer;
}
.slot.active{
color: blue;
}
.pl-10{
padding-left: 10px;
}
.pr-10{
padding-right: 10px;
}
</style>
js:
<script>
$(function () {
$('#daterange-btn span').html(GetDateStr(-2)+' ～ '+ (new Date()).Format("yyyy-MM-dd"));
$("#incomeStartDate").val(GetDateStr(-2));
$("#incomeEndDate").val((new Date()).Format("yyyy-MM-dd"));
$('#daterange-btn').daterangepicker({
startDate:moment().subtract(2, 'days'),
endDate: (new Date()).Format("yyyy-MM-dd"),
locale:{
format: 'YYYY-MM-DD',
separator: " ～ "
}
},
function(start, end,label) {
if(end==null){
end = start;
}
$('#daterange-btn span').html(start.format('YYYY-MM-DD')+' ～ '+end.format('YYYY-MM-DD'));
if($("#incomeStartDate").val() != start.format('YYYY-MM-DD')&& $("#incomeEndDate").val() != end.format('YYYY-MM-DD')){
$(".timeSlot .slot").removeClass("active");
}
$("#incomeStartDate").val(start.format('YYYY-MM-DD'));
$("#incomeEndDate").val(end.format('YYYY-MM-DD'));
});
})
/*获取今天前后的日期*/
function GetDateStr(AddDayCount) {
var dd = new Date();
dd.setDate(dd.getDate()+AddDayCount);//获取AddDayCount天后的日期
var y = dd.getFullYear();
var m = (dd.getMonth()+1)<10?"0"+(dd.getMonth()+1):(dd.getMonth()+1);//获取当前月份的日期，不足10补0
var d = dd.getDate()<10?"0"+dd.getDate():dd.getDate();//获取当前几号，不足10补0
return y+"-"+m+"-"+d;
}
/*选择到账日期区间*/
function choseTimeSlot(obj,type) {
$(obj).addClass("active").siblings(".slot").removeClass("active");
if(type == 0){
/*昨天*/
var date = GetDateStr(-1);
$('#daterange-btn span').html(date+' ～ '+date);
$("#incomeStartDate").val(date);
$("#incomeEndDate").val(date);
$('#daterange-btn').data('daterangepicker').setStartDate(date);
$('#daterange-btn').data('daterangepicker').setEndDate(date);
}else if(type == 1){
/*今天*/
var date =(new Date()).Format("yyyy-MM-dd");
$('#daterange-btn span').html(date+' ～ '+date);
$("#incomeStartDate").val(date);
$("#incomeEndDate").val(date);
$('#daterange-btn').data('daterangepicker').setStartDate(date);
$('#daterange-btn').data('daterangepicker').setEndDate(date);
}else if(type == 2){
/*前三天*/
$('#daterange-btn span').html(GetDateStr(-2)+' ～ '+(new Date()).Format("yyyy-MM-dd"));
$("#incomeStartDate").val(GetDateStr(-2));
$("#incomeEndDate").val((new Date()).Format("yyyy-MM-dd"));
$('#daterange-btn').data('daterangepicker').setStartDate(GetDateStr(-2));
$('#daterange-btn').data('daterangepicker').setEndDate((new Date()).Format("yyyy-MM-dd"));
}
}
/*格式化日期*/
Date.prototype.Format = function (fmt) { //author: meizz
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt))
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt))
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
</script>
网友评论