Recently, I looked at some functions about js dates and suddenly thought of the calendar control. So I tried to write one. As a background programmer, I am limited in my level. Let’s take a learning attitude and take a look at the example I wrote. Let’s learn together to make progress!
First, a commonly used date function:
Date(year, month, day)
var date=new Date();
Get Year
var year=this.date.getFullYear();
Get month, here is the monthly index so you need +1
var month=this.date.getMonth()+1;
What day is the acquisition date
var day=this.date.getDate();
Get the day of the week, return 0. Sunday 1. Monday 2. Tuesday 3. Wednesday 4. Thursday 5. Friday 6. Saturday
var week=this.date.getDay();
Get what day of the week it is on that month
var getWeekDay=function(year,month,day){ var date=new Date(year,month,day); return date.getDay(); } var weekstart= getWeekDay(this.year, this.month-1, 1)Get the number of days in the month
var getMonthDays=function(year,month){ var date=new Date(year,month,0); return date.getDate(); }var monthdays= this.getMonthDays(this.year,this.month);Okay, we have only used so many parameters. The following is actually some operations and judgments about the date corresponding to the week, dynamic splicing labels. Let’s directly post the example I wrote:
Reproduction image:
<html> <meta http-equiv="content-type" content="text/html;charset=utf-8"><head> <style type="text/css">td{ text-align: center;} </style> <script type="text/javascript"> window.onload=function(){ var Calender=function(){ this.Init.apply(this,arguments); } Calender.prototype={ Init:function(container,options){ this.date=new Date(); this.year=this.date.getFullYear(); this.month=this.date.getMonth()+1; this.day=this.date.getDate(); this.week=this.date.getDay(); this.weekstart=this.getWeekDay(this.year, this.month-1, 1); this.monthdays=this.getMonthDays(this.year, this.month); this.containerDiv=document.getElementById(container); this.options=options!=null?options:{ border:'1px solid green', width:'400px', height:'200px', backgroundColor:'lightgrey', fontColor:'blue' } }, getMonthDays:function(year,month){ var date=new Date(year,month,0); return date.getDate(); }, getWeekDay:function(year,month,day){ var date=new Date(year,month,day); return date.getDay(); }, View:function(){ var tablestr='<table>'; tablestr+='<tr><td colspan="3"></td><td>Year:'+this.year+'</td><td colspan="3">month:'+this.month+'</td></tr>'; tablestr+='<tr><td>day</td><td>two</td><td>four</td><td>five</td><td>six</td></tr>'; var index=1; //Judge where the first day of each month is var style=''; if(this.weekstart<7) { tablestr+='<tr>'; for (var i = 0; i <this.weekstart; i++) { tablestr+='<td></td>'; }; for (var i = 0; i < 7-this.weekstart; i++) { style=this.day==(i+1)?"background-Color:green;":""; index++; tablestr+='<td style="'+style+'" val='+(this.year+'-'+this.month+'-'+(i+1))+'>'+(i+1)+'</td>'; }; tablestr+='</tr>'; } ///The position corresponding to the remaining days//Judge the integer row and correspond to the corresponding position var remaindays=this.monthdays-(7-this.weekstart); var row=Math.floor(remaindays%7==0?remaindays/7:((remaindays/7)+1)) ; var count=Math.floor(remaindays/7); for (var i = 0; i < count; i++) { tablestr+='<tr>'; for (var k = 0; k < 7; k++) { style=this.day==(index+k)?"background-Color:green;":""; tablestr+='<td style="'+style+'"" val='+(this.year+'-'+this.month+'-'+(index+k))+'>'; tablestr+=index+k; tablestr+='</td>'; }; tablestr+='</tr>'; index+=7; }; //The position corresponding to the last remaining days (the days of the week cannot be filled) var remaincols=this.monthdays-(index-1); tablestr+='<tr>'; for (var i = 0; i < remaincols; i++) { style=this.day==index?"background-Color:green;":""; tablestr+='<td style="'+style+'"" val='+(this.year+'-'+this.month+'-'+(index))+'>'; tablestr+=index; tablestr+='</td>'; index++; }; tablestr+='</tr>'; tablestr+='</table>'; return tablestr; }, Render:function(){ var calendarDiv=document.createElement('div'); calendarDiv.style.border=this.options.border; calendarDiv.style.width=this.options.width; calendarDiv.style.height=this.options.height; calendarDiv.style.cursor='pointer'; calendarDiv.style.backgroundColor=this.options.backgroundColor; // calendarDiv.style.color=this.options.fontColor; calendarDiv.style.color='red' ; calendarDiv.onclick=function(e){ var evt=e||window.event; var target=evt.srcElement||evt.target; if(target&&target.getAttribute('val')) { alert(target.getAttribute('val')); } } var tablestr=this.View(); this.tablestr=tablestr; calendarDiv.innerHTML=tablestr; var div=document.createElement('div'); div.style.width='auto'; div.style.height='auto'; div.appendChild(calenderDiv); ///Page turn div var pagerDiv=document.createElement('div'); pagerDiv.style.width='auto'; pagerDiv.style.height='auto'; var that=this; ///Reset the parameter var resetPara=function(year,month,day){ that.date=new Date(year,month,day); that.year=that.date.getFullYear(); that.month=that.date.getMonth()+1; that.day=that.date.getDate(); that.week=that.date.getDay(); that.weekstart=that.getWeekDay(that.year, that.month-1, 1); that.monthdays= that.getMonthDays(that.year, that.month); } //Previous page var preBtn=document.createElement('input'); preBtn.type='button'; preBtn.value='<'; preBtn.onclick=function(){ that.containerDiv.removeChild(div); resetPara(that.year,that.month-2,that.day); that.Render(); } //Next page var nextBtn=document.createElement('input'); nextBtn.type='button'; nextBtn.value='>'; nextBtn.onclick=function(){ that.containerDiv.removeChild(div); resetPara(that.year,that.month,that.day); that.Render(); } pagerDiv.appendChild(preBtn); pagerDiv.appendChild(nextBtn); div.appendChild(pagerDiv); var dropDiv=document.createElement('div'); var dropdivstr=''; //Select year dropdivstr+='<select id="ddlYear">'; for (var i = 1900; i <= 2100; i++) { dropdivstr+= i==that.year ?'<option value="'+i+'" selected="true">'+i+'</option>' : '<option value="'+i+'">'+i+'</option>'; }; dropdivstr+='</select>'; //Select month dropdivstr+='<select id="ddlMonth">'; for (var i = 1; i <= 12; i++) { dropdivstr+= i==that.month ?'<option value="'+i+'" selected="true">'+i+'</option>' : '<option value="'+i+'">'+i+'</option>'; }; dropdivstr+='</select>'; dropDiv.innerHTML=dropdivstr; div.appendChild(dropDiv); that.containerDiv.appendChild(div); ///Bind the event that selects year and month var ddlChange=function(){ var ddlYear=document.getElementById('ddlYear'); var ddlMonth=document.getElementById('ddlMonth'); var yearIndex=ddlYear.selectedIndex; var year=ddlYear.options[yearIndex].value; var monthIndex=ddlMonth.selectedIndex; var month=ddlMonth.options[monthIndex].value; that.containerDiv.removeChild(div); resetPara(year,month-1,th.day); that.Render(); } ddlYear.onchange=function(){ ddlChange(); } ddlMonth.onchange=function(){ ddlChange(); } } } var calendar=new Calender('dvTest',{ border:'1px solid green', width:'400px', height:'200px', backgroundColor:'' } ); calendar.Render(); } </script> </head><body> <div id="dvTest"></div></body></html>The code has been changed again and the view's table is replaced with a div, in order to solve the read-only problem of IE's tableinnerHTML. In addition, options are added for configurability.
The above code has a simple explanation, and the functions are the most basic. If you do it in depth, you can expand it. I hope this article can give you some inspiration.