Web Front-end
JS Tutorial
Sharing examples of making calendar controls with native js_javascript skills
Sharing examples of making calendar controls with native js_javascript skills
The example in this article shares with you a simple calendar control implemented in js for your reference. The specific content is as follows
Rendering:
Specific code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>date</title>
<style type="text/css">
*{ margin:0; padding:0;}
a{ text-decoration:none; outline:none;}
body a{outline:none;blr:expression(this.onFocus=this.blur());}
img{ border:none;}
ul{ list-style:none;}
body{ color:#666666; font-size:14px; font-family:"微软雅黑"; background-color:#fff; height:100%; overflow-y:scroll;*overflow-y:inherit;}
/*html{ height:100%;}*/
.clearfix:after{ content:"."; display:block; height:0; clear:both; overflow:hidden;}
.clearfix{ zoom:1;}
#box{width:350px; position:absolute;}
#title{width:350px; height:50px;}
#month{ float:left;width:60px; height:50px;text-align:center;cursor:pointer;line-height:50px;}
#year{float:left;width:80px; height:50px;text-align:center;cursor:pointer;line-height:50px;}
#week{ width:350px;height:50px;}
#week div{ float:left; width:48px; height:48px; margin:1px; background:#C90; color:#fff; text-align:center; line-height:48px; cursor:pointer;}
#con{ width:350px;}
#con div{ float:left; width:48px; height:48px; margin:1px; background:#CCC; color:#333; text-align:center; line-height:48px; cursor:pointer;}
#con .edate{background:#999;}
#con .edate:hover{background:#09F; color:#fff;}
#con div.now{background:#09F; color:#fff;}
#prevmonth,#nextmonth,#prevyear,#nextyear{float:left;width:50px; height:50px;text-align:center;cursor:pointer;line-height:50px;}
#btns{width:350px; height:40px;}
#nowtime{ float:left; margin:5px; height:30px; line-height:30px; padding:0 5px; background:#09F; cursor:pointer; border-radius:5px;}
#nowtime:hover{background:#ddd;}
#cleartime{float:left; margin:5px; height:30px; line-height:30px; padding:0 5px; background:#09F; cursor:pointer; border-radius:5px;}
</style>
</head>
<body>
<p style=" margin:100px;">选择日期：<input type="text" id="date" value="" style="height:40px; line-height:40px;"/></p>
</body>
<script type="text/javascript">
window.onload=function(){
//创建日历控件基本结构
var obody=document.body;
createbox();
function createbox(){
var ddbox=document.createElement("div");
ddbox.id="box";
ddbox.style.display="none";
var str="";
str+='<div id="title"><div id="prevyear"><<</div><div id="prevmonth"><</div><div id="month"></div><div id="year"></div><div id="nextmonth">></div><div id="nextyear">>></div></div>';
str+='<div id="week"><div>日</div><div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div></div>';
str+='<div id="con" class="clearfix"></div>';
str+='<div id="btns"><div id="nowtime">当前时间</div><div id="cleartime">清空</div></div>';
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<=oneweek;i++){//留空
var eday=document.createElement("div");
eday.innerHTML="";
con.appendChild(eday);
};
for(var i=1;i<=alld;i++){//正常区域
var eday=document.createElement("div");
if(i==nowd){
eday.innerHTML=i;
eday.className="now edate";
con.appendChild(eday);
}else{
eday.innerHTML=i;
eday.className="edate";
con.appendChild(eday);
};
};
};
//获取本月1号的周值
function oneyearoneday(dateObj){
var oneyear = new Date();
var year=dateObj.getFullYear();
var month=dateObj.getMonth();//0是12月
oneyear.setFullYear(year);
oneyear.setMonth(month);//0是12月
oneyear.setDate(1);
return oneyear.getDay();
};
//当前是几
function nowday(dateObj){
return dateObj.getDate();
};
//获取本月总日数方法
function alldays(dateObj){
var year=dateObj.getFullYear();
var month=dateObj.getMonth();
if(isLeapYear(year)){//闰年
switch(month) {
case 0: return "31"; break;
case 1: return "29"; break; //2月
case 2: return "31"; break;
case 3: return "30"; break;
case 4: return "31"; break;
case 5: return "30"; break;
case 6: return "31"; break;
case 7: return "31"; break;
case 8: return "30"; break;
case 9: return "31"; break;
case 10: return "30"; break;
case 11: return "31"; break;
default:
};
}else{//平年
switch(month) {
case 0: return "31"; break;
case 1: return "28"; break; //2月
case 2: return "31"; break;
case 3: return "30"; break;
case 4: return "31"; break;
case 5: return "30"; break;
case 6: return "31"; break;
case 7: return "31"; break;
case 8: return "30"; break;
case 9: return "31"; break;
case 10: return "30"; break;
case 11: return "31"; break;
default:
};
};
};
//闰年判断函数
function isLeapYear(year){
if( (year % 4 == 0) && (year % 100 != 0 || year % 400 == 0)){
return true;
}else{
return false;
};
};
//月份转化方法
function toyear(dateObj){
var month=dateObj.getMonth()
switch(month) {
case 0: return "1"; break;
case 1: return "2"; break;
case 2: return "3"; break;
case 3: return "4"; break;
case 4: return "5"; break;
case 5: return "6"; break;
case 6: return "7"; break;
case 7: return "8"; break;
case 8: return "9"; break;
case 9: return "10"; break;
case 10: return "11"; break;
case 11: return "12"; break;
default:
};
};
};
</script>
</html>I hope this article will be helpful to everyone in learning javascript programming.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1376
52
Replace String Characters in JavaScript
Mar 11, 2025 am 12:07 AM
Detailed explanation of JavaScript string replacement method and FAQ This article will explore two ways to replace string characters in JavaScript: internal JavaScript code and internal HTML for web pages. Replace string inside JavaScript code The most direct way is to use the replace() method: str = str.replace("find","replace"); This method replaces only the first match. To replace all matches, use a regular expression and add the global flag g: str = str.replace(/fi
How do I create and publish my own JavaScript libraries?
Mar 18, 2025 pm 03:12 PM
Article discusses creating, publishing, and maintaining JavaScript libraries, focusing on planning, development, testing, documentation, and promotion strategies.
How do I optimize JavaScript code for performance in the browser?
Mar 18, 2025 pm 03:14 PM
The article discusses strategies for optimizing JavaScript performance in browsers, focusing on reducing execution time and minimizing impact on page load speed.
How do I debug JavaScript code effectively using browser developer tools?
Mar 18, 2025 pm 03:16 PM
The article discusses effective JavaScript debugging using browser developer tools, focusing on setting breakpoints, using the console, and analyzing performance.
10 Ways to Instantly Increase Your jQuery Performance
Mar 11, 2025 am 12:15 AM
This article outlines ten simple steps to significantly boost your script's performance. These techniques are straightforward and applicable to all skill levels. Stay Updated: Utilize a package manager like NPM with a bundler such as Vite to ensure
Using Passport With Sequelize and MySQL
Mar 11, 2025 am 11:04 AM
Sequelize is a promise-based Node.js ORM. It can be used with PostgreSQL, MySQL, MariaDB, SQLite, and MSSQL. In this tutorial, we will be implementing authentication for users of a web app. And we will use Passport, the popular authentication middlew
How to Build a Simple jQuery Slider
Mar 11, 2025 am 12:19 AM
This article will guide you to create a simple picture carousel using the jQuery library. We will use the bxSlider library, which is built on jQuery and provides many configuration options to set up the carousel. Nowadays, picture carousel has become a must-have feature on the website - one picture is better than a thousand words! After deciding to use the picture carousel, the next question is how to create it. First, you need to collect high-quality, high-resolution pictures. Next, you need to create a picture carousel using HTML and some JavaScript code. There are many libraries on the web that can help you create carousels in different ways. We will use the open source bxSlider library. The bxSlider library supports responsive design, so the carousel built with this library can be adapted to any
How do I use source maps to debug minified JavaScript code?
Mar 18, 2025 pm 03:17 PM
The article explains how to use source maps to debug minified JavaScript by mapping it back to the original code. It discusses enabling source maps, setting breakpoints, and using tools like Chrome DevTools and Webpack.
