原生js制作日历控件实例分享_javascript技巧
程序员文章站
2022-04-10 19:21:06
...
本文实例为大家分享了js实现一个简单的日历控件，供大家参考，具体内容如下
';
str+='
';
str+='';
str+='
';
ddbox.innerHTML=str;
obody.appendChild(ddbox);
};
//===================get ele===============================
var omonth=document.getElementById("month");
var oyear=document.getElementById("year");
var con=document.getElementById("con");
var prevmonth=document.getElementById("prevmonth");
var nextmonth=document.getElementById("nextmonth");
var prevyear=document.getElementById("prevyear");
var nextyear=document.getElementById("nextyear");
var nowtime=document.getElementById("nowtime");
var date=document.getElementById("date");
var box=document.getElementById("box");
var cleartime=document.getElementById("cleartime");
//===================show date===============================
date.onfocus=function(){//显示控件
var datel=this.getBoundingClientRect().left;
var datet=this.getBoundingClientRect().top+40;
box.style.left=datel+"px";
box.style.top=datet+"px";
box.style.display="block";
};
con.onclick=function(event){
if(event.target.tagName=="DIV" && event.target.nodeType=="1" && hasclass(event.target.className,"edate")){
date.value="";
date.value=dateObj.getFullYear()+"-"+toyear(dateObj)+"-"+event.target.innerHTML;
box.style.display="none";
};
};
cleartime.onclick=function(event){
date.value="";
};
//===================set year month===============================
//默认时间对象
var dateObj = new Date();
//动态控制
prevmonth.onclick=function(){//上一月
var ddm=null;
var ddy=null;
if((dateObj.getMonth()-1)==-1){
ddm=11;
ddy=dateObj.getFullYear()-1;
}else{
ddm=dateObj.getMonth()-1;
ddy=dateObj.getFullYear();
};
dateObj.setFullYear(ddy);
dateObj.setMonth(ddm);
omonth.innerHTML=toyear(dateObj)+"月";
oyear.innerHTML=dateObj.getFullYear()+"年";
remove();
oneweek=oneyearoneday(dateObj);
alld=alldays(dateObj);
nowd=nowday(dateObj);
init(oneweek,alld,nowd);
};
nextmonth.onclick=function(){//下一月
var ddm=null;
var ddy=null;
if((dateObj.getMonth()+1)==12){
ddm=0;
ddy=dateObj.getFullYear()+1;
}else{
ddm=dateObj.getMonth()+1;
ddy=dateObj.getFullYear();
};
dateObj.setFullYear(ddy);
dateObj.setMonth(ddm);
omonth.innerHTML=toyear(dateObj)+"月";
oyear.innerHTML=dateObj.getFullYear()+"年";
remove();
oneweek=oneyearoneday(dateObj);
alld=alldays(dateObj);
nowd=nowday(dateObj);
init(oneweek,alld,nowd);
};
prevyear.onclick=function(){//上一年
var ddy=dateObj.getFullYear()-1;
dateObj.setFullYear(ddy);
oyear.innerHTML=dateObj.getFullYear()+"年";
remove();
oneweek=oneyearoneday(dateObj);
alld=alldays(dateObj);
nowd=nowday(dateObj);
init(oneweek,alld,nowd);
};
nextyear.onclick=function(){//下一年
var ddy=dateObj.getFullYear()+1;
dateObj.setFullYear(ddy);
oyear.innerHTML=dateObj.getFullYear()+"年";
remove();
oneweek=oneyearoneday(dateObj);
alld=alldays(dateObj);
nowd=nowday(dateObj);
init(oneweek,alld,nowd);
};
//返回到今时今日
nowtime.onclick=function(){
var dddate=new Date();
var ddm=dddate.getMonth();
var ddy=dddate.getFullYear();
dateObj.setFullYear(ddy);
dateObj.setMonth(ddm);
omonth.innerHTML=toyear(dateObj)+"月";
oyear.innerHTML=dateObj.getFullYear()+"年";
remove();
oneweek=oneyearoneday(dateObj);
alld=alldays(dateObj);
nowd=nowday(dateObj);
init(oneweek,alld,nowd);
};
//年月获取
var year=dateObj.getFullYear();
var month=toyear(dateObj);//0是12月
//月年的显示
omonth.innerHTML=month+"月";
oyear.innerHTML=year+"年";
//===================set day===============================
//获取本月1号的周值
var oneweek=oneyearoneday(dateObj);
//本月总日数
var alld=alldays(dateObj);
//当前是几
var nowd=nowday(dateObj);
//初始化显示本月信息
init(oneweek,alld,nowd);
//===================function===============================
//有无指定类名的判断
function hasclass(str,cla){
var i=str.search(cla);
if(i==-1){
return false;
}else{
return true;
};
};
//初始化日期显示方法
function remove(){
con.innerHTML="";
};
function init(oneweek,alld,nowd){
for(var i=1;i
效果图：
具体代码：
date 选择日期：
>
>>
日
一
二
三
四
五
六
当前时间
清空
推荐阅读
-
js实现瀑布流的一种简单方法实例分享_javascript技巧
-
javascript分页代码实例分享(js分页)_javascript技巧
-
修改js Calendar日历控件 兼容IE9/谷歌/火狐_javascript技巧
-
javascript分页代码实例分享(js分页)_javascript技巧
-
原生js制作简单的数字键盘_javascript技巧
-
js判断页面中是否有指定控件的简单实例_javascript技巧
-
js事件冒泡实例分享(已测试)_javascript技巧
-
轻量级的原生js日历插件calendar.js使用指南_javascript技巧
-
原生js结合html5制作简易的双色子游戏_javascript技巧
-
js制作简易年历完整实例_javascript技巧