刚毕业,闲着的时候做了一个日历控件,用css和jquery实现基本的日历功能,包括年份和月份的翻页,日期的选择,根据输入框的初始内容来初始化控件,日期改变之后,也会更新该输入框的内容。
首先是css代码:
@charset "utf-8";
/* CSS Document */
.x-date{
text-align:center;
}
.date-body{
display:none;
width:210px;
height:260px;
background-color:#B4D2AE;
margin-top:5px;
border-radius:5px;
z-index:999;
position:absolute;
}
.date-body .date-year,.date-body .date-day{
width:210px;
height:30px;
font:18px;
color:#400000;
border-bottom:1px solid #c0c0c0;
}
.date-body .date-year span{
display:inline-block;
width:50%;
height:100%;
line-height:30px;
float:left;
}
.date-body .date-year span samp{
display:inline-block;
width:30px;
text-align:right;
}
.date-body .date-year{
position:relative;
line-height: 30px;
color: #4C4B79;
font-family: monospace;
font-size: 15px;
}
.date-body .date-year .year{
text-align:right;
}
.date-body .date-year .month{
text-align:left;
}
.date-ul{
list-style:none;
margin:0;
padding:0;
}
.date-body .date-year .icon{
display:inline-block;
position:absolute;
width:0;
height:0;
border:8px solid transparent;
cursor:pointer;
}
.date-body .date-year .pre-year{
top:8px;
left:0px;
border-right-color:#333;
}
.date-body .date-year .pre-month{
top:8px;
left:15px;
border-right-color:#333;
}
.date-body .date-year .next-year{
top:8px;
right:0;
border-left-color:#333;
}
.date-body .date-year .next-month{
top:8px;
right:15px;
border-left-color:#333;
}
.date-body .date-year .pre-year:hover,.date-body .date-year .pre-month:hover{
border-right-color:#c0c0c0;
}
.date-body .date-year .next-year:hover,.date-body .date-year .next-month:hover{
border-left-color:#c0c0c0;
}
.date-date{
border-bottom:1px solid #c0c0c0;
}
.date-body .date-day ul li,.date-body .date-date ul li{
list-style:none;
display:inline-block;
width:20px;
height: 18px;
float:left;
margin:0;
padding:6px 5px;
color:#8C8C0D;
text-align:center;
border-radius:50%;
}
.date-ul li a{
text-decoration:none;
color:#FF9933;
}
.date-ul .date-li:hover {
background:#CCCC00;
}
.date-active{
background:#CCCC00;
}
.date-body .active-date{
text-align: center;
line-height: 30px;
color: #EA6E6E;
}
.date-body .active-date span:nth-child(1){
display:inline-block;
width:32px;
}
.date-body .active-date span:nth-child(2),.date-body .active-date span:nth-child(3){
display:inline-block;
width:16px;
}
然后是js代码:
$(function(){
$("body").delegate(".date-ul li","click",function(e){
if($(this).children().length>0){
$(".date-ul .date-active").removeClass("date-active");
$(this).addClass("date-active");
$(".date-body .active-date span:eq(2)").text($(this).children(":first").text());
$("input.x-date").val($(".date-body .active-date span:eq(0)").text()+"/"+$(".date-body .active-date span:eq(1)").text()+"/"+$(".date-body .active-date span:eq(2)").text());
$(".date-body").fadeOut();
}
})
$("body").delegate(".date-body .date-year .pre-year","click",function(){
var year = ~~$(".date-body .date-year .year samp").text();
$(".date-body .date-year .year samp").text(year-1);
$(".date-body .active-date span:eq(0)").text(year-1);
initCurrMonth();
})
$("body").delegate(".date-body .date-year .next-year","click",function(){
var year = ~~$(".date-body .date-year .year samp").text();
$(".date-body .date-year .year samp").text(year+1);
$(".date-body .active-date span:eq(0)").text(year+1);
initCurrMonth();
})
$("body").delegate(".date-body .date-year .pre-month","click",function(){
var month = ~~$(".date-body .date-year .month samp").text();
var year = ~~$(".date-body .date-year .year samp").text();
if(month==1){
$(".date-body .date-year .month samp").text(12);
$(".date-body .date-year .year samp").text(year-1);
$(".date-body .active-date span:eq(0)").text(year-1);
$(".date-body .active-date span:eq(1)").text(12);
}else{
$(".date-body .date-year .month samp").text(month-1);
$(".date-body .active-date span:eq(1)").text(month-1);
}
initCurrMonth();
})
$("body").delegate(".date-body .date-year .next-month","click",function(){
debugger
var month = ~~$(".date-body .date-year .month samp").text();
var year = ~~$(".date-body .date-year .year samp").text();
if(month==12){
$(".date-body .date-year .month samp").text(1);
$(".date-body .date-year .year samp").text(year+1);
$(".date-body .active-date span:eq(1)").text(1);
$(".date-body .active-date span:eq(0)").text(year+1);
}else{
$(".date-body .date-year .month samp").text(month+1);
$(".date-body .active-date span:eq(1)").text(month+1);
}
initCurrMonth();
})
$("input.x-date").click(function(e){
$(".date-body").fadeIn();
e.stopPropagation();
})
$(document).click(function(e){
debugger
if($(e.target).parents(".date-body").length==0){
$(".date-body").fadeOut();
}
})
initDateFrame();
initDate();
initCurrMonth();
})
//初始化日历的基本框架
function initDateFrame(){
var dateFrame="";
dateFrame += "
"
dateFrame += "
"
dateFrame += "
"
dateFrame += "
"
dateFrame += "
年"
dateFrame += "
月"
dateFrame += "
"
dateFrame += "
"
dateFrame += "
"
dateFrame += "
- 日
- 一
- 二
- 三
- 四
- 五
- 六
"
dateFrame += "
"
dateFrame += "
-
-
";
$("input.x-date").after(dateFrame);
//$("input.x-date").attr("disabled","disabled");
var top = $("input.x-date").offset().top+$("input.x-date").height();
var left = $("input.x-date").offset().left;
//alert(top+":"+left);
$(".date-body").css({"top":top,"left":left});
}
//根据输入框中的日期初始化控件
function initDate(){
var inputStr = $("input.x-date").val();
var resultStr = new Date(inputStr);
//debugger
if("Invalid Date" != resultStr){
$(".date-year .year samp").text(resultStr.getFullYear());
$(".date-year .month samp").text(resultStr.getMonth()+1);
$(".date-year input[name=currDay]").val(resultStr.getDate());
}
}
//根据年月初始化日历的数据
function initCurrMonth(){
var year = ~~$(".year samp").text()||new Date().getFullYear();
var month = ~~$(".month samp").text()||new Date().getMonth()+1;
var today = ~~$(".date-year input[name=currDay]").val()||new Date().getDate();
var dayCount = new Date(year,month,0).getDate();
var week = new Date(year,month-1,1).getDay();
$(".year samp").text(year);
$(".month samp").text(month);
$(".date-body .date-date").empty();
var circleDay = 1;
var html = "";
for(var i=0;circleDay<=dayCount;i++){
html += "
-
";
for(var j=1; j<=7; j++){
if(j>week && circleDay<=dayCount){
if(circleDay==today){
html += "
- "+circleDay+"
- ";
}else{
html += "
- "+circleDay+"
- ";
}
circleDay++;
}else{
html += "
- ";
}
}
week=0;
html += "
";
}
$(".date-body").css("height",(i+3)*30+4+"px");
$(".date-body .date-date").css("height",i*30+"px");
$(".date-body .date-date").append(html);
$(".date-body .active-date span:eq(0)").text(year);
$(".date-body .active-date span:eq(1)").text(month);
$(".date-body .active-date span:eq(2)").text(today);
}
使用此控件只需引入上面js、css文件和jquery文件以及
<input type="text" class="x-date"/>一行代码即可。
效果图: