jQuery时间区间选择插件Date Range Picker优化版增加年份选择

在客户CRM项目开发中，有一个需要通过时间日期筛选的需求，可以查看指定时间范围内的销售数据，原先的效果不是很理想，如图：

只能简单的下拉年份和月份，没有比如上月，最近30天之类的，界面也比较一般，经过优化后，变成下面的样子

DUAN~！是不是舒服多了，以下是开发过程。

1、HTML页面内容

直接参照这个改一下就行：

<script src="./jquery.min.js"></script>
<script type="text/javascript" src="./moment.min.js"></script>
<script type="text/javascript" src="./daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="./daterangepicker.css">
<input id="demo">
<script>
$(function () {
var locale = {
"format": 'YYYY-MM-DD',
"separator": " - ",
"applyLabel": "确定",
"cancelLabel": "取消",
"fromLabel": "起始时间",
"toLabel": "结束时间'",
"customRangeLabel": "自定义",
"weekLabel": "W",
"daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"],
"monthNames": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
"firstDay": 1
};
$('#demo').daterangepicker({ 
showDropdowns: true, //设置可以选择年的范围1
minYear: 2015, //设置可以选择年的范围2
maxYear: 2055, //设置可以选择年的范围3
opens: "left", //设置可以选择年的范围4 
'locale': locale, 
ranges: {
'今日': [moment(), moment()],
'昨日': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'最近7日': [moment().subtract(6, 'days'), moment()],
'最近30日': [moment().subtract(29, 'days'), moment()],
'本月': [moment().startOf('month'), moment().endOf('month')],
'上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month')
.endOf('month')]
},
"alwaysShowCalendars": true,
"startDate": new Date(),
"endDate": new Date(),
"opens": "right",
}, function (start, end, label) {
console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
alert("日期选择完毕！"); 
//开始时间
start_time = start.format('YYYY-MM-DD')
$('#start_time').val(start_time);
//结束时间
end_time = end.format('YYYY-MM-DD')
$('#end_time').val(end_time); 
});
})
</script>
<hr />
<br />
开始时间:
<input name="start_time" value="开始时间" type="text" style="padding-left:5px;" size="10" id="start_time" onclick="SelectDate(this)" readonly="readonly" />
结束时间:
<input name="end_time" value="结束时间" type="text" style="padding-left:5px;" size="10" id="end_time" onclick="SelectDate(this)" readonly="readonly" />
<style>
input {
height: 40px;
line-height: 40px;
text-align: center;
}
.btn-default {
background-color: #fff;
border: 1px solid #828080;
border-radius: 3px;
cursor: pointer;
}
.btn-primary {
background-color: #08c;
border: 1px solid #08c;
border-radius: 3px;
color: #fff;
cursor: pointer;
}
.btn-primary:hover{
background-color: #357ebd;
}
</style>