<html>
<head>
<style type="text/css">
.clear{
clear: both
}
.date-control{
position: relative;
border:solid 1px lightgray;
width: 260px;
background-color: white;
z-index: 98;
}
.date-control a{
text-decoration: none;
}
.date-control-head .week{
display: block;
float: left;
width: 32%;
border-right: solid 2px white;
text-align: center;
background-color: rgb(196,223,252);
}
.date-control-head .week a{
display: block;
margin:5px;
}
.date-control-head .month{
display: block;
float: left;
width: 33%;
border-right: solid 2px white;
text-align: center;
background-color: rgb(143,193,244);
}
.date-control-head .month a{
display: block;
margin:5px;
}
.date-control-head .year{
display: block;
float: left;
width: 33%;
text-align: center;
background-color: rgb(101,161,223);
}
.date-control-head .year a{
display: block;
margin:5px;
}
.date-select-area{
display: none;
}
.week-select-area{
float:left;
width: 33%;
}
.month-select-area{
float:left;
width: 34%;
}
.year-select-area{
float:left;
width: 33%;
}
.week-select-list{
list-style-type: none;
margin: 5px 0px;
padding:0px;
}
.week-select-list li{
margin:10px 0px;
text-align: center;
display: block;
min-height: 25px;
}
.week-select-list li a{
display: block;
float: left;
width: 90%;
line-height: 25px;
margin:0px 5%;
}
.month-select-list{
list-style-type:none;
margin: 5px 0px;
padding:0px;
}
.month-select-list li{
margin:10px 0px;
text-align: center;
display: block;
min-height: 25px;
}
.month-select-list li a{
display: block;
float: left;
width: 40%;
line-height: 25px;
margin:0px 5%;
}
.year-select-list{
list-style-type: none;
margin: 5px 0px;
padding:0px;
}
.year-select-list li{
margin:10px 0px;
text-align: center;
display: block;
min-height: 25px;
}
.year-select-list li a{
display: block;
float: left;
width: 90%;
line-height: 25px;
margin: 0px 5%;
}
.date-select-area .week-select:hover{
background-color: rgb(216,212,213);
}
.date-select-area .month-select:hover{
background-color: rgb(216,212,213);
}
.date-select-area .year-select:hover{
background-color: rgb(216,212,213);
}
.date-select-text{
min-height: 25px;
text-align: center;
background-color: rgb(241,241,241);
border-top: solid 2px white;
}
.date-select-text span{
line-height: 25px;
font-size: 14px
}
.date-selected{
background-color: rgb(216,212,213);
}
.date-select-mask{
position: fixed;
left:0px;
right:0px;
top:0px;
bottom:0px;
background-color: lightgray;
opacity: 0.7;
z-index: 99;
display: none;
}
</style>
</head>
<body>
<div id="date-control-1" class="date-control">
<div class="date-control-head">
<span class="week"><a href="#">周</a></span>
<span class="month"><a href="#">月度</a></span>
<span class="year"><a href="#">年度</a></span>
</div>
<div class="date-select-area">
<div class="week-select-area">
<ul class="week-select-list">
<li>
<a data="-1" class="week-select last-week" href="#">上周</a>
</li>
</ul>
</div>
<div class="month-select-area">
<ul class="month-select-list">
<li>
<a data="1" class="month-select month-left month-1" href="#">1月</a>
<a data="2" class="month-select month-right month-2" href="#">2月</a>
</li>
<li>
<a data="3" class="month-select month-v month-3" href="#">3月</a>
<a data="4" class="month-select month-right month-4" href="#">4月</a>
</li>
<li>
<a data="5" class="month-select month-left month-5" href="#">5月</a>
<a data="6" class="month-select month-right month-6" href="#">6月</a>
</li>
<li>
<a data="7" class="month-select month-left month-7" href="#">7月</a>
<a data="8" class="month-select month-right month-8" href="#">8月</a>
</li>
<li>
<a data="9" class="month-select month-left month-9" href="#">9月</a>
<a data="10" class="month-select month-right month-10" href="#">10月</a>
</li>
<li>
<a data="11" class="month-select month-left month-11" href="#">11月</a>
<a data="12" class="month-select month-right month-12" href="#">12月</a>
</li>
</ul>
</div>
<div class="year-select-area">
<ul class="year-select-list">
<li>
<a data="2015" class="year-select year-2015" href="#">2015</a>
</li>
<li>
<a data="2016" class="year-select year-2016" href="#">2016</a>
</li>
</ul>
</div>
</div>
<div class="clear"></div>
<div class="date-select-text">
<span>2015年8月1日 - 2015年8月31日</span>
</div>
</div>
<div id="date-control-2" class="date-control">
<div class="date-control-head">
<span class="week"><a href="#">周</a></span>
<span class="month"><a href="#">月度</a></span>
<span class="year"><a href="#">年度</a></span>
</div>
<div class="date-select-area">
<div class="week-select-area">
<ul class="week-select-list">
<li>
<a data="-1" class="week-select last-week" href="#">上周</a>
</li>
</ul>
</div>
<div class="month-select-area">
<ul class="month-select-list">
<li>
<a data="1" class="month-select month-left month-1" href="#">1月</a>
<a data="2" class="month-select month-right month-2" href="#">2月</a>
</li>
<li>
<a data="3" class="month-select month-v month-3" href="#">3月</a>
<a data="4" class="month-select month-right month-4" href="#">4月</a>
</li>
<li>
<a data="5" class="month-select month-left month-5" href="#">5月</a>
<a data="6" class="month-select month-right month-6" href="#">6月</a>
</li>
<li>
<a data="7" class="month-select month-left month-7" href="#">7月</a>
<a data="8" class="month-select month-right month-8" href="#">8月</a>
</li>
<li>
<a data="9" class="month-select month-left month-9" href="#">9月</a>
<a data="10" class="month-select month-right month-10" href="#">10月</a>
</li>
<li>
<a data="11" class="month-select month-left month-11" href="#">11月</a>
<a data="12" class="month-select month-right month-12" href="#">12月</a>
</li>
</ul>
</div>
<div class="year-select-area">
<ul class="year-select-list">
<li>
<a data="2015" class="year-select year-2015" href="#">2015</a>
</li>
<li>
<a data="2016" class="year-select year-2016" href="#">2016</a>
</li>
</ul>
</div>
</div>
<div class="clear"></div>
<div class="date-select-text">
<span>2015年8月1日 - 2015年8月31日</span>
</div>
</div>
<div class="date-select-mask"></div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready( function () {
function dateControl(id, maskSelector, useCallback){
var selectorPrefix = "#" + id + " ";
var defaultYearMonth = getDefaultYearMonth();
var selectYear = defaultYearMonth.year,selectMonth = defaultYearMonth.month;//选择的年和月
$(selectorPrefix + ".year-"+defaultYearMonth.year).addClass("date-selected");//给默认年添加已选择样式
$(selectorPrefix + ".month-"+defaultYearMonth.month).addClass("date-selected");//给默认月添加已选择样式
var selectWeek = false;//判断是否选择了周
var beginYear,beginMonth,beginDay;
var endYear,endMonth,endDay;
$(selectorPrefix + ".date-control-head a").each(function(){//给日期选择控件头部“周”、“月度”、“年度”3个链接添加鼠标单击事件处理
$(this).click(function(){
if($(selectorPrefix + ".date-select-area").css("display") == "none"){//展开日期选择控件
useCallback(id);
$("#"+id).css("z-index", 100);
$(selectorPrefix + ".date-select-area").show();
if(maskSelector != null && maskSelector != ""){//判断遮罩层选择器是否存在
$(maskSelector).show();
}
}else{//折叠日期选择控件
// $(".date-select-mask").hide();
// $(".date-select-area").hide();
}
});
});
$(selectorPrefix + ".week-select").click(function(){//周被单击
$(selectorPrefix + ".week-select").removeClass("date-selected");
$(selectorPrefix + ".month-select").removeClass("date-selected");
$(selectorPrefix + ".year-select").removeClass("date-selected");
$(this).addClass("date-selected");
selectWeek = true;
refreshSelectDate();
});
$(selectorPrefix + ".month-select").click(function(){//月被单击
$(selectorPrefix + ".week-select").removeClass("date-selected");
$(selectorPrefix + ".month-select").removeClass("date-selected");
$(this).addClass("date-selected");
if(!yearHasSelect()){
$(selectorPrefix + ".year-"+defaultYearMonth.year).addClass("date-selected");
selectYear = defaultYearMonth.year;
}
selectWeek = false;
selectMonth = parseInt($(this).attr("data"));
refreshSelectDate();
});
$(selectorPrefix + ".year-select").click(function(){//年被单击
$(selectorPrefix + ".week-select").removeClass("date-selected");
$(selectorPrefix + ".year-select").removeClass("date-selected");
$(this).addClass("date-selected");
if(!monthHasSelect()){
$(selectorPrefix + ".month-"+defaultYearMonth.month).addClass("date-selected");
selectMonth = defaultYearMonth.month;
}
selectWeek = false;
selectYear = parseInt($(this).attr("data"));
refreshSelectDate();
});
function monthHasSelect(){
var selected = false;
$(selectorPrefix + ".month-select").each(function(){
if($(this).hasClass("date-selected")){
selected = true;
return true;
}
});
return selected;
}
function yearHasSelect(){
var selected = false;
$(selectorPrefix + ".year-select").each(function(){
if($(this).hasClass("date-selected")){
selected = true;
return true;
}
});
return selected;
}
function refreshSelectDate(){//重新计算所选择的日期范围并且更新日期选择控件底部的提示文字
if(selectWeek){//选择的是周
var end = new Date();
var begin = addDays(end, -6);
beginYear = begin.getFullYear();
beginMonth = begin.getMonth() + 1;
beginDay = begin.getDate();
endYear = end.getFullYear();
endMonth = end.getMonth() + 1;
endDay = end.getDate();
}else{//选择的是年、月
beginYear = endYear = selectYear;
beginMonth = endMonth = selectMonth;
beginDay = 1;
endDay = getLastDay(selectYear, selectMonth);
}
var selectDateText = beginYear + "年" + beginMonth + "月" + beginDay + "日"
+ " - " + endYear + "年" + endMonth + "月" + endDay + "日";
$(selectorPrefix + ".date-select-text span").text(selectDateText);
}
function addDays(date, days){//days的值可以是正数也可以是负数，也可以是0
var result = 1 * date + days * 24 * 60 * 60 * 1000;
result = new Date(result);
return result;
}
function getLastDay(year, month){//获取year年month月的最后一天是哪号，范围1~31
var longMonths = [1,3,5,7,8,10,12];
var shortMonths = [4,6,9,11];
var lastDay;
if(month == 2){
if(isLeapYear(year)){
lastDay = 29;
}else{
lastDay = 28;
}
}else if(longMonths.indexOf(month) >= 0){
lastDay = 31;
}else{
lastDay = 30;
}
return lastDay;
}
function isLeapYear(year){//判断是否为闰年
if(year % 400 == 0 || (year % 4 == 0 && year % 100 != 0)){
return true;
}else{
return false;
}
}
function getDefaultYearMonth(){
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth();
if(month == 0){
month = 12;
year -= 1;
}
return {
year: year,
month: month
};
}
return {
getSelectDate:function(){//外部调用接口，返回所选起始和截止年、月、日
refreshSelectDate();
return {
beginYear: beginYear,
beginMonth: beginMonth,
beginDay: beginDay,
endYear: endYear,
endMonth: endMonth,
endDay: endDay
};
},
collapseDateControl:function(){
$("#"+id).css("z-index", 98);
$(selectorPrefix + ".date-select-area").hide();
}
};
}
var dateControl1 = dateControl("date-control-1", ".date-select-mask", useCallback);
var dateControl2 = dateControl("date-control-2", ".date-select-mask", useCallback);
var useDateControlId;
function useCallback(dateControlId){
useDateControlId = dateControlId;
}
$(".date-select-mask").click(function(){//日期选择控件后面的遮罩层被单击
$(this).hide();
if(useDateControlId == "date-control-1"){
dateControl1.collapseDateControl();
console.log(dateControl1.getSelectDate());
}else if(useDateControlId == "date-control-2"){
dateControl2.collapseDateControl();
console.log(dateControl2.getSelectDate());
}
});
});
</script>
</body>
</html>
