纯javascript制作日历控件
以前要用到日历控件都是直接从网上下载一套源码来使用，心里一直有个梗，就是想自己动手写一个日历控件，最近刚好来了兴趣，时间上也允许，于是自己摸索写了一个，功能还算完善，界面就凑合了。可能最值得说的一点就是让input控件内部右边显示一个按钮，我是直接给input加了个背景，然后把input的边框去掉实现的。
这个是最初版的，再往后打算做出纯javascript版的，再往后打算用JQuery做一套。
<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>日历控件</title>
<style>
#date_text{
background-image:url(images/input.png);
background-repeat:no-repeat;
width:198px;
height:27px;
border:none;
padding-left:5px;
cursor:pointer;
}
#cal_body{
width:198px;
height:auto;
overflow:hidden;
border:solid1px#CCCCCC;
display:none;
position:absolute;
z-index:10;
}
.line{
width:100%;
height:26px;
float:left;
background-color:#0FF;
font-size:14px;
}
.cube{
float:left;
width:26px;
height:26px;
line-height:26px;
text-align:center;
margin-left:2px;
margin-bottom:2px;
}
.btn{
float:left;
background-color:#CCC;
margin-left:10px;
width:20px;
height:20px;
text-align:center;
line-height:20px;
border-radius:3px;
border:solid1px;
margin-top:2px;
cursor:pointer;
}
.year_month{
float:left;
margin-left:10px;
width:90px;
height:19px;
text-align:center;
line-height:19px;
border-radius:6px;
}
.end_tag{
height:26px;
line-height:26px;
margin-left:10px;
}
</style>
<script>
Date.prototype.toFormatString=function(){
varresult=this.getFullYear()+"-"+(this.getMonth()+1)+"-"+this.getDate();
returnresult;
};
vartoday=newDate();
varmonth_big=newArray("1","3","5","7","8","10","12");//包含所有大月的数组
varmonth_small=newArray("4","6","9","11");//包含所有小月的数组
//判断数组array中是否包含元素obj的函数，包含则返回true，不包含则返回false
functionarray_contain(array,obj){
for(vari=0;i<array.length;i++){
if(array[i]==obj)
returntrue;
}
returnfalse;
}
//判断年份year是否为闰年，是闰年则返回true，否则返回false
functionisLeapYear(year){
vara=year%4;
varb=year%100;
varc=year%400;
if(((a==0)&&(b!=0))||(c==0)){
returntrue;
}
returnfalse;
}
functionhideCalendar(){
varcalbody=document.getElementById("cal_body");
cal_body.style.display="none";
}
functionshowCalendar(){
varcalbody=document.getElementById("cal_body");
varstyle=getDefaultStyle(calbody,"display");
if(style=="none")
cal_body.style.display="block";
if(style=="block")
cal_body.style.display="none";
vardate_text=document.getElementById("date_text");
varval=date_text.value;
init(val);
}
functioninit(val){
clearCube();
vartemp_date;
vardate_text=document.getElementById("date_text");
if(val==""){
temp_date=today;
date_text.value=today.toFormatString();
}
else{
temp_date=newDate(val);
}
varyear=temp_date.getFullYear();
varmonth=temp_date.getMonth()+1;
vardate=temp_date.getDate();
temp_date.setDate(1);
varstart=temp_date.getDay()+7;
varend;
if(array_contain(month_big,month)){
end=start+31;
}
elseif(array_contain(month_small,month)){
end=start+30;
}
else{
if(isLeapYear(year)){
end=start+29;
}
else{
end=start+28;
}
}
for(vari=start;i<end;i++){
varcube=document.getElementsByClassName("cube").item(i);
cube.innerHTML=i-start+1;
cube.style.cursor="pointer";
cube.onmouseover=function(){
this.style.backgroundColor='#0FF';
}
if(date==(i-start+1))
cube.style.backgroundColor='#0FF';
else{
cube.onmouseout=function(){
this.style.backgroundColor='';
}
}
cube.onclick=function(){
date_text.value=year+"-"+month+"-"+this.innerHTML;
cal_body.style.display="none";
}
}
document.getElementById("text_year").value=year;
document.getElementById("text_month").value=month;
}
functionclearCube(){
for(vari=7;i<49;i++){
varcube=document.getElementsByClassName("cube").item(i);
cube.innerHTML="";
cube.style.backgroundColor="";
}
}
functionyearDown(){
if(isValidated()){
varold_year=parseInt(document.getElementById("text_year").value);
if(old_year>1960){
varyear=old_year-1;
varmonth=parseInt(document.getElementById("text_month").value);
varval=year+"-"+month+"-"+1;
init(val);
}
}
}
functionyearUp(){
if(isValidated()){
varold_year=parseInt(document.getElementById("text_year").value);
if(old_year<2050){
varyear=old_year+1;
varmonth=parseInt(document.getElementById("text_month").value);
varval=year+"-"+month+"-"+1;
init(val);
}
}
}
functionmonthDown(){
if(isValidated()){
varold_month=parseInt(document.getElementById("text_month").value)
if(old_month>1){
varyear=parseInt(document.getElementById("text_year").value);
varmonth=old_month-1;
varval=year+"-"+month+"-"+1;
init(val);
}
else{
varyear=parseInt(document.getElementById("text_year").value)-1;
varmonth=12;
varval=year+"-"+month+"-"+1;
init(val);
}
}
}
functionmonthUp(){
if(isValidated()){
varold_month=parseInt(document.getElementById("text_month").value)
if(old_month<12){
varyear=parseInt(document.getElementById("text_year").value);
varmonth=parseInt(document.getElementById("text_month").value)+1;
varval=year+"-"+month+"-"+1;
init(val);
}
else{
varyear=parseInt(document.getElementById("text_year").value)+1;
varmonth=1;
varval=year+"-"+month+"-"+1;
init(val);
}
}
}
functionisValidated(){
varyear=document.getElementById("text_year").value;
varmonth=document.getElementById("text_month").value;
if(isNaN(year)||isNaN(month)){
alert("请输入正确的年份/月份");
returnfalse;
}
else{
if(year%1!=0||month%1!=0){
alert("请输入正确的年份/月份");
returnfalse;
}
else{
year=parseInt(year);
if(year<1960||year>2050){
alert("请输入1960~2050之间的年份！");
returnfalse;
}
elseif(month<1||month>12){
alert("请输入正确的月份！");
returnfalse;
}
else{
returntrue;
}
}
}
}
functionchanged(){
if(isValidated()){
varyear=document.getElementById("text_year").value;
varmonth=document.getElementById("text_month").value;
varval=year+"-"+month+"-"+1;
init(val);
}
}
functiongetDefaultStyle(obj,attribute){
returnobj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute];
}
</script>
</head>
<body>
<divid="container">
<divid="input_bg"><inputid="date_text"type="text"readonlyonClick="showCalendar()"/></div>
<divid="cal_body">
<divclass="line"><divclass="btn"id="year_down"onClick="yearDown()">-</div><inputclass="year_month"id="text_year"value="2015"onChange="changed()"><divclass="btn"id="year_up"onClick="yearUp()">+</div><spanclass="end_tag">年</span></div>
<divclass="line"><divclass="btn"id="month_down"onClick="monthDown()">-</div><inputclass="year_month"id="text_month"value="5"onChange="changed()"><divclass="btn"id="month_up"onClick="monthUp()">+</div><spanclass="end_tag">月</span></div>
<divclass="cube">日</div>
<divclass="cube">一</div>
<divclass="cube">二</div>
<divclass="cube">三</div>
<divclass="cube">四</div>
<divclass="cube">五</div>
<divclass="cube">六</div>
<divclass="cube"></div>
<divclass="cube"></div>
<divclass="cube"></div>
<divclass="cube"></div>
<divclass="cube"></div>
<divclass="cube"></div>
<divclass="cube"></div>
<divclass="cube"></div>
<divclass="cube"></div>
<divclass="cube"></div>
<divclass="cube"></div>
<divclass="cube"></div>
<divclass="cube"></div>
<divclass="cube"></div>
<divclass="cube"></div>
<divclass="cube"></div>
<divclass="cube"></div>
<divclass="cube"></div>
<divclass="cube"></div>
<divclass="cube"></div>
<divclass="cube"></div>
<divclass="cube"></div>
<divclass="cube"></div>
<divclass="cube"></div>
<divclass="cube"></div>
<divclass="cube"></div>
<divclass="cube"></div>
<divclass="cube"></div>
<divclass="cube"></div>
<divclass="cube"></div>
<divclass="cube"></div>
<divclass="cube"></div>
<divclass="cube"></div>
<divclass="cube"></div>
<divclass="cube"></div>
<divclass="cube"></div>
<divclass="cube"></div>
<divclass="cube"></div>
<divclass="cube"></div>
<divclass="cube"></div>
<divclass="cube"></div>
<divclass="cube"></div>
</div>
<div>
</body>
</html>
以上所述就是本文的全部内容了，希望大家能够喜欢。