自定义日历选择框--控制--日历插件

最新推荐文章于 2024-07-19 12:47:14 发布
Take_Dream
最新推荐文章于 2024-07-19 12:47:14 发布
阅读量3k
点赞数
分类专栏： javascript
本文链接：https://blog.csdn.net/Take_Dream_as_Horse/article/details/50979259
版权
javascript 专栏收录该内容
24 篇文章 0 订阅
订阅专栏
<!doctype html>
<html>
 <head>
 <title>选择月份</title>
  <meta charset="utf-8" />
  <meta name="author" content="徐崧" />


  <script src="jquery-1.11.3.js"></script>




  <style type="text/css">

*{
margin:0;
padding:0;
list-style: none;
}


body{
background: #999;
}


.hide{
display: none;
}


  #d1{
  width:602px;
  height:600px;
  border:1px solid green;
  margin:20px auto;
  text-align:center; 
  }
  


  .chose-year{
  width:600px;
  height:60px;
  border-bottom:1px solid #999;
  overflow: hidden;
  }


.before,.next{
float:left;
width:50px;
height:60px;
}

.next{
float:right;
}


.bef-btn,.nex-btn{
display: block;
width:0;
height:0;
border:30px solid transparent;
cursor:pointer;
float:right;
}


.bef-btn{
border-right-color:#0090a4;
}


.nex-btn{
border-left-color:#0090a4;
float:left;
}




.show-year{
width:500px;
height:60px;
float:left;
background:#666;
overflow:hidden;
position:relative;
}

.show-year>div{
text-align: center;
width:500px;
height:60px;
background:#00a000;
margin:0 auto;
position:absolute;
}

.show-year>div span{
color:#fff;
font-size: 25px;
font-weight: bold;
line-height: 60px;
}


.move-left{
-webkit-transform:translate(-500px,0);
-moz-transform:translate(-500px,0);
-o-transform:translate(-500px,0);
-ms-transform:translate(-500px,0);
}

.chose-month{
width:600px;
height:508px;
overflow: hidden;
}


.chose-month a{
display: block;
float:left;
width:196px;
height:120px;
border:1px solid #666;
margin-left: 2px;
margin-top: 2px;
cursor:pointer;
font-size: 28px;
text-align: center;
line-height: 120px;
font-weight: bold;
}


.chose-month a:hover{
background:#db552d; 
color:#fff;
}


/*********日历部分的样式**********/


#CalendarMain {
width: 400px;
height: 300px;
border: 1px solid blue;
margin: 40px auto;
}




/*******头部样式******/
#title {
width: 100%;
height: 50px;
background-color: #d5d5d5;
position: relative;
}




.beforemonth{
position: absolute;
width:0;
height:0;
border:25px solid transparent;
border-right-color: #666;
left:-50px;
}


.nextMonth{
position: absolute;
width:0;
height:0;
border:25px solid transparent;
border-left-color: #666;
right:-50px;
}




.selectYear {
float: left;
margin-left: 50px;
width:80px;
height:50px;
line-height: 50px;
color:#444;
text-align:right;
font-size: 22px;
font-weight: bold;
cursor: pointer;
}


.selectYear:hover {
text-decoration: underline;
}


.selectMonth {
float: left;
width:80px;
height:50px;
line-height: 50px;
color:#444;
text-align:left;
font-size: 22px;
font-weight: bold;
cursor: pointer;
}


.selectMonth:hover {
text-decoration: underline;
}


.score{
line-height:40px;
color:#555;
margin-left: 100px;


}


/********日历部分样式********/




.currentDay {
float: right;
}


#context {
background-color: #fff;
width: 100%;
}


.week {
width: 100%;
height: 35px;
}


.week>h3 {
float: left;
color: #808080;
text-align: center;
margin: 0;
padding: 0;
height:25px;
margin-top: 10px;
font-size: 16px;
}


.dayItem {
float: left;
}


.lastItem {
color: #d1c7b7 !important;
}


.item {
color: #333;
float: left;
text-align: center;
cursor: pointer;
margin: 0;
font-family: "微软雅黑";
font-size: 15px;
}


.item:hover {
background-color: #ec7166;
color:#fff;
}


.hove{
background-color: #ec7166;
color:#fff; 
}


/***当前时间样式***/
.currentItem>a {
background-color: #ec7166;
color:#fff;
font-weight: bold;
display: block;
width:100%;
height:100%;
}




/***********/




#Container {
overflow: hidden;
float: left;
}


#center {
width: 100%;
overflow: hidden;
}


#centerMain {
width: 300%;
margin-left: -100%;
}


#selectYearDiv {
float: left;
background-color: #fff;
}


#selectYearDiv>div {
float: left;
text-align: center;
font-family: "微软雅黑";
font-size: 16px;
border: 1px solid #ccc;
margin-left: -1px;
margin-top: -1px;
cursor: pointer;
color: #909090;
}


.currentYearSd, .currentMontSd {
color: #ff4400 !important;
}


#selectMonthDiv {
float: left;
background-color: #fff;
}


#selectMonthDiv>div {
color: #909090;
float: left;
text-align: center;
font-family: "微软雅黑";
font-size: 16px;
border: 1px solid #ccc;
margin-left: -1px;
margin-top: -1px;
cursor: pointer;
}


#selectYearDiv>div:hover, #selectMonthDiv>div:hover {
background-color: #efefef;
}


#centerCalendarMain {
float: left;
}




  </style>


 </head>
 <body>


  <div id="d1">
    <div class="chose-year">
    <div class="before">
    <a class="bef-btn"></a>
    </div>
    <div class="show-year">
    <div>
    <span id="year">2016年</span>
    </div>
    </div>
    <div class="next">
    <a class="nex-btn"></a>
    </div>
    </div>
    <div class="chose-month">
    <a id="1">1月</a>
    <a id="2">2月</a>
    <a id="3">3月</a>
    <a id="4">4月</a>
    <a id="5">5月</a>
    <a id="6">6月</a>
    <a id="7">7月</a>
    <a id="8">8月</a>
    <a id="9">9月</a>
    <a id="10">10月</a>
    <a id="11">11月</a>
    <a id="12">12月</a>
    </div>
  </div>


  <!-- 日历的显示内容 -->
<div id="CalendarMain">


  <div id="title"> 
 <a class="beforemonth" href="javascript:" onClick="CalendarHandler.CalculateLastMonthDays();"></a>
 <a class="selectYear"  onClick="CalendarHandler.CreateSelectYear(CalendarHandler.showYearStart);">年份</a>
 <a class="selectMonth" onClick="CalendarHandler.CreateSelectMonth()">月份</a> 
 <a class="score">82分</a>
 <a class="nextMonth" href="javascript:" onClick="CalendarHandler.CalculateNextMonthDays();"></a>
  </div>


  <div id="context">
    <div class="week">
      <h3> 一 </h3>
      <h3> 二 </h3>
      <h3> 三 </h3>
      <h3> 四 </h3>
      <h3> 五 </h3>
      <h3> 六 </h3>
      <h3> 日 </h3>
    </div>


    <div id="center">
      <div id="centerMain">
        <div id="selectYearDiv"></div>
        <div id="centerCalendarMain">
          <div id="Container"></div>
        </div>
        <div id="selectMonthDiv"></div>
      </div>
    </div>


  </div>


</div>






<!-- 自定义选择月份的样式 -->
  <script type="text/javascript">


  var year=$("#year").html();
  year=parseInt(year);


  $(".bef-btn").click(function(){


  // $(".show-year>div").animate({"left":"+=500px"},1000);
  // $(".show-year>div").empty();


  year-=1;
  $("#year").html(year+"年");


  // $(".show-year").append('<div><span id="year">'+year+'</span><span>年</span></div>');


  });


$(".nex-btn").click(function(){


// $(".show-year>div").animate({"right":"+=500px"},1000);
// $(".show-year>div").empty();


  year+=1;
  $("#year").html(year+"年");


  // $(".show-year").append('<div><span id="year">'+year+'</span><span>年</span></div>');


  });




  </script>


  <!-- 日历插件部分的JS-->


  <script type="text/javascript">
$(document).ready(function(e) {
CalendarHandler.initialize();
});


var CalendarHandler = {
currentYear: 0,
currentMonth: 0,
isRunning: false,
showYearStart:2009,
tag:0,
initialize: function() {
$calendarItem = this.CreateCalendar(0, 0, 0);
$("#Container").append($calendarItem);


/日历显示部分的高度
$("#context").css("height", $("#CalendarMain").height() - 50 + "px");


$("#center").css("height", $("#context").height() - 35 + "px");
$("#selectYearDiv").css("height", $("#context").height() - 35 + "px").css("width", $("#context").width() + "px");
$("#selectMonthDiv").css("height", $("#context").height() - 35 + "px").css("width", $("#context").width() + "px");
$("#centerCalendarMain").css("height", $("#context").height() - 35 + "px").css("width", $("#context").width() + "px");


$calendarItem.css("height", $("#context").height() - 35 + "px"); //.css("visibility","hidden");
$("#Container").css("height", "0px").css("width", "0px").css("margin-left", $("#context").width() / 2 + "px").css("margin-top", ($("#context").height() - 35) / 2 + "px");
$("#Container").animate({
width: $("#context").width() + "px",
height: ($("#context").height() - 35) * 2 + "px",
marginLeft: "0px",
marginTop: "0px"
}, 300, function() {
$calendarItem.css("visibility", "visible");
});
$(".dayItem").css("width", $("#context").width() + "px");


/用户刷新时展示的日历行数
var itemPaddintTop = $(".dayItem").height() / 6;


$(".item").css({
"width": $(".week").width() / 7 + "px",
"line-height": itemPaddintTop + "px",
"height": itemPaddintTop + "px"
});


///向日历增加选中的样式(ajax请求)
$(".item").click(function(){
$(".item").removeClass("hove");
$(this).addClass("hove");
});




$(".week>h3").css("width", $(".week").width() / 7 + "px");
this.RunningTime();
},


//选择年份
CreateSelectYear: function(showYearStart) {
CalendarHandler.showYearStart=showYearStart;
$(".currentDay").show();
$("#selectYearDiv").children().remove();
var yearindex = 0;
for (var i = showYearStart; i < showYearStart+12; i++) {
yearindex++;
if(i==showYearStart){
$last=$("<div> <<上一年 </div>");
$("#selectYearDiv").append($last);
$last.click(function(){
CalendarHandler.CreateSelectYear(CalendarHandler.showYearStart-10);
});
continue;
}
if(i==showYearStart+11){
$next=$("<div> 下一年>> </div>");
$("#selectYearDiv").append($next);
$next.click(function(){
CalendarHandler.CreateSelectYear(CalendarHandler.showYearStart+10);
});
continue;
}

if (i == this.currentYear) {
$yearItem=$("<div class=\"currentYearSd\" id=\"" + yearindex + "\">" + i + "</div>")

}
else{
$yearItem=$("<div id=\"" + yearindex + "\">" + i + "</div>");
}
$("#selectYearDiv").append($yearItem);


$yearItem.click(function(){


$calendarItem=CalendarHandler.CreateCalendar(Number($(this).html()),1,1);
$("#Container").append($calendarItem);
CalendarHandler.CSS()
   CalendarHandler.isRunning = true;
   $($("#Container").find(".dayItem")[0]).animate({
height: "0px"
   }, 300, function() {
$(this).remove();
CalendarHandler.isRunning = false;
   });
$("#centerMain").animate({
marginLeft: -$("#center").width() + "px"
}, 500);
});




if (yearindex == 1 || yearindex == 5 || yearindex == 9) $("#selectYearDiv").find("#" + yearindex).css("border-left-color", "#fff");
if (yearindex == 4 || yearindex == 8 || yearindex == 12) $("#selectYearDiv").find("#" + yearindex).css("border-right-color", "#fff");

}
$("#selectYearDiv>div").css("width", ($("#center").width() - 4) / 4 + "px").css("line-height", ($("#center").height() - 4) / 3 + "px");
$("#centerMain").animate({
marginLeft: "0px"
}, 300);


},


CreateSelectMonth: function() {
$(".currentDay").show();
$("#selectMonthDiv").children().remove();
for (var i = 1; i < 13; i++) {
if (i == this.currentMonth) $monthItem=$("<div class=\"currentMontSd\" id=\"" + i + "\">" + i + "月</div>");
else  $monthItem=$("<div id=\"" + i + "\">" + i + "月</div>");
$("#selectMonthDiv").append($monthItem);


$monthItem.click(function(){
$calendarItem=CalendarHandler.CreateCalendar(CalendarHandler.currentYear,Number($(this).attr("id")),1);
$("#Container").append($calendarItem);
CalendarHandler.CSS()
   CalendarHandler.isRunning = true;
   $($("#Container").find(".dayItem")[0]).animate({
height: "0px"
   }, 300, function() {
$(this).remove();
CalendarHandler.isRunning = false;
   });
$("#centerMain").animate({
marginLeft: -$("#center").width() + "px"
}, 500);
});


if (i == 1 || i == 5 || i == 9) $("#selectMonthDiv").find("#" + i).css("border-left-color", "#fff");
if (i == 4 || i == 8 || i == 12) $("#selectMonthDiv").find("#" + i).css("border-right-color", "#fff");
}
$("#selectMonthDiv>div").css("width", ($("#center").width() - 4) / 4 + "px").css("line-height", ($("#center").height() - 4) / 3 + "px");
$("#centerMain").animate({
marginLeft: -$("#center").width() * 2 + "px"
}, 300);
},






IsRuiYear: function(aDate) {
return (0 == aDate % 4 && (aDate % 100 != 0 || aDate % 400 == 0));
},
CalculateWeek: function(y, m, d) {
var arr = "7123456".split("");
with(document.all) {
var vYear = parseInt(y, 10);
var vMonth = parseInt(m, 10);
var vDay = parseInt(d, 10);
}
var week =arr[new Date(y,m-1,vDay).getDay()];
return week;
},
CalculateMonthDays: function(m, y) {
var mDay = 0;
if (m == 0 || m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) {
mDay = 31;
} else {
if (m == 2) {
//判断是否为芮年
var isRn = this.IsRuiYear(y);
if (isRn == true) {
mDay = 29;
} else {
mDay = 28;
}
} else {
mDay = 30;
}
}
return mDay;
},


//创建日历


CreateCalendar: function(y, m, d) {
$dayItem = $("<div class=\"dayItem\"></div>");
//获取当前月份的天数
var nowDate = new Date();
if(y==nowDate.getFullYear()&&m==nowDate.getMonth()+1||(y==0&&m==0))
$(".currentDay").hide();
var nowYear = y == 0 ? nowDate.getFullYear() : y;
this.currentYear = nowYear;
var nowMonth = m == 0 ? nowDate.getMonth() + 1 : m;
this.currentMonth = nowMonth;
var nowDay = d == 0 ? nowDate.getDate() : d;


$(".selectYear").html(nowYear + "年");
$(".selectMonth").html(nowMonth + "月");



var nowDaysNub = this.CalculateMonthDays(nowMonth, nowYear);
//获取当月第一天是星期几
//var weekDate = new Date(nowYear+"-"+nowMonth+"-"+1);
//alert(weekDate.getDay());
var nowWeek = parseInt(this.CalculateWeek(nowYear, nowMonth, 1));
//nowWeek=weekDate.getDay()==0?7:weekDate.getDay();
//var nowWeek=weekDate.getDay();
//获取上个月的天数
var lastMonthDaysNub = this.CalculateMonthDays((nowMonth - 1), nowYear);


if (nowWeek != 0) {
//生成上月剩下的日期
for (var i = (lastMonthDaysNub - (nowWeek - 1)); i < lastMonthDaysNub; i++) {
$dayItem.append("<div class=\"item lastItem\"><a>" + (i + 1) + "</a></div>");
}
}


//生成当月的日期
for (var i = 0; i < nowDaysNub; i++) {
if (i == (nowDay - 1)) $dayItem.append("<div class=\"item currentItem\"><a>" + (i + 1) + "</a></div>");
else $dayItem.append("<div class=\"item\"><a>" + (i + 1) + "</a></div>");
}







//获取总共已经生成的天数
var hasCreateDaysNub = nowWeek + nowDaysNub;
//如果小于42，往下个月推算
if (hasCreateDaysNub < 42) {
for (var i = 0; i <= (42 - hasCreateDaysNub); i++) {
$dayItem.append("<div class=\"item lastItem\"><a>" + (i + 1) + "</a></div>");
}
}


return $dayItem;
},


CSS: function() {
var itemPaddintTop = $(".dayItem").height() / 6;
$(".item").css({
"width": $(".week").width() / 7 + "px",
"line-height": itemPaddintTop + "px",
"height": itemPaddintTop + "px"
});


///向日历增加选中的样式(ajax请求)
$(".item").click(function(){
$(".item").removeClass("hove");
$(this).addClass("hove");


});


// $(".currentItem>a").css("margin-left", ($(".item").width() - 25) / 2 + "px").css("margin-top", ($(".item").height() - 25) / 2 + "px");
},


CalculateNextMonthDays: function() {
if (this.isRunning == false) {
$(".currentDay").show();
var m = this.currentMonth == 12 ? 1 : this.currentMonth + 1;
var y = this.currentMonth == 12 ? (this.currentYear + 1) : this.currentYear;
var d = 0;
var nowDate = new Date();
if (y == nowDate.getFullYear() && m == nowDate.getMonth() + 1) d = nowDate.getDate();
else d = 1;
$calendarItem = this.CreateCalendar(y, m, d);
$("#Container").append($calendarItem);


this.CSS();
this.isRunning = true;
$($("#Container").find(".dayItem")[0]).animate({
height: "0px"
}, 300, function() {
$(this).remove();
CalendarHandler.isRunning = false;
});
}
},


CalculateLastMonthDays: function() {
if (this.isRunning == false) {
$(".currentDay").show();
var nowDate = new Date();
var m = this.currentMonth == 1 ? 12 : this.currentMonth - 1;
var y = this.currentMonth == 1 ? (this.currentYear - 1) : this.currentYear;
var d = 0;

if (y == nowDate.getFullYear() && m == nowDate.getMonth() + 1) d = nowDate.getDate();
else d = 1;
$calendarItem = this.CreateCalendar(y, m, d);
$("#Container").append($calendarItem);
var itemPaddintTop = $(".dayItem").height() / 6;
this.CSS();
this.isRunning = true;
$($("#Container").find(".dayItem")[0]).animate({
height: "0px"
}, 300, function() {
$(this).remove();
CalendarHandler.isRunning = false;
});
}
},
CreateCurrentCalendar: function() {
if (this.isRunning == false) {
$(".currentDay").hide();
$calendarItem = this.CreateCalendar(0, 0, 0);
$("#Container").append($calendarItem);
this.isRunning = true;
$($("#Container").find(".dayItem")[0]).animate({
height: "0px"
}, 300, function() {
$(this).remove();
CalendarHandler.isRunning = false;
});
this.CSS();
$("#centerMain").animate({
marginLeft: -$("#center").width() + "px"
}, 500);
}
},
RunningTime: function() {
var mTiming = setInterval(function() {
var nowDate = new Date();
var h=nowDate.getHours()<10?"0"+nowDate.getHours():nowDate.getHours();
var m=nowDate.getMinutes()<10?"0"+nowDate.getMinutes():nowDate.getMinutes();
var s=nowDate.getSeconds()<10?"0"+nowDate.getSeconds():nowDate.getSeconds();
var nowTime = h + ":" + m + ":" + s;
$("#footNow").html("本地时间 "+nowTime);
}, 1000);


}
}


</script>








  <!-- 引入自定义JS -->
<script>

  
$(".chose-month>a").click(function(){


var year=$("#year").html();
year=parseInt(year);




var month=$(this).html();
month=parseInt(month);




//传入两个参数再重新绘制图形
$calendarItem=CalendarHandler.CreateCalendar(year,month,1);
$("#Container").append($calendarItem);
CalendarHandler.CSS()
   CalendarHandler.isRunning = true;
   $($("#Container").find(".dayItem")[0]).animate({
height: "0px"
   }, 300, function() {
$(this).remove();
CalendarHandler.isRunning = false;
   });
$("#centerMain").animate({
marginLeft: -$("#center").width() + "px"
}, 500);




});
  
  


  


</script>


 </body>
</html>