bootstrap-daterangepicker是基于bootstrap的一個雙日歷插件薪捍，用于選擇日期范圍，因原插件不符合項目的實際情況，因此在不影響原插件的使用下蹭沛，對插件進行部分修改及功能拓展臂寝。下面說明一下更改和拓展的部分：
更改：
????????????1、更改了插件的布局和樣式
? ? ? ? ? ? 2摊灭、隱藏了原插件左邊對日期范圍的快捷選擇部分（如：今天咆贬、明天、未來7天等）帚呼，快捷選擇放到了外部日期選擇的右側(cè)
? ? ? ? ? ? 3掏缎、可在日期選擇器下實時展示當前選擇的日期區(qū)間并可點擊進行快速更改。
? ? ? ? ? ? 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;
? ? }
? ? /*選擇到賬日期區(qū)間*/
? ? 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>
