最简约JS日历控件,原生JS实现日历
分类:微服架构

<script type="text/javascript"> <!-- today=new Date(卡塔尔(قطر‎; year=today.getFullYear(State of Qatar; month=today.getMonth(State of Qatar; date=today.getDate(State of Qatar; day=today.getDay(卡塔尔(قطر‎; month++; document.write("<table border='1' style='font-size:12px'>"State of Qatar; document.write("<tr><td colspan='7' align='center'>"+year+"年"+month+"月"+"</td></tr>"卡塔尔; document.write("<tr><td>日</td><td>生机勃勃</td><td>二</td><td>三</td><td>四</td><td>五</td></td><td>六</td></tr>"State of Qatar; //总结前段时期某些许天 var days; if(month!=2) { if(month<=7) { days=((month%2)==0)?30:31; } else { days=((month%2)==0)?31:30; } } else { if(((year%4==0)&&(year%100!=0)State of Qatar||(year%400==0卡塔尔State of Qatar { //闰年 days=29; } else { days=28; } } //计算上一个月的率后天是星期几 firstdate_day=day-(date%7-1卡塔尔; //总计须求几行 var rows=4; if(((days+firstdate_day)/7)>5) { rows=6; } else if(((days+firstdate_dayState of Qatar/7State of Qatar>4State of Qatar { rows=5; } //起头展现日期 var datepos=1; for(i=0;i<rows;i++卡塔尔国 { document.write("<tr>"卡塔尔国; for(j=0;j<7;j++State of Qatar { document.write("<td>"卡塔尔if(((i==0卡塔尔(قطر‎&&(j<firstdate_day))||(datepos>days)) document.write("  "); else { if(date==datepos) { document.write("<font color='#FF0000'>"); document.write(datepos); document.write("</font>"); } else document.write(datepos); ++datepos; } document.write("</td>"); } document.write("</tr>"); } document.write("</table>"); --> </script>

前言

完结效果与利益:

 

[Ctrl+A 全体取舍 提醒:你可先改善部分代码,再按运行]

 

1,年份按此年度前后各10年选区范围,相同的时候提供自由选取

该控件在风靡的谷歌(Google卡塔尔浏览器,最新的银狐浏览器,还应该有在IE8上都進展成功测量试验,宽容性好。相当轻巧扩张,调用格局简单,今后的品种上日期控件能够采纳本人编排的了。

  首先申明,方法是有参照互连网一些素材的,举例闰年的决断,比方各种月第一天是星期几的推断。不说太多,拆分出一个个函数,希望能描述尽或许的清晰明了。

2,月份选用

更加多学学交换迎接访问作者的博客()

 

3,日期的点击选取

function choose_date_czw(date_id,objtd){

 生机勃勃,推断闰年

4,FF浏览器援救不佳!!

if(date_id=="choose_date_czw_close"){

 

技术:HTML+CSS+Javascript

    document.getElementById("choose_date_czw_id").style.display="none";

复制代码

 

    return;

//剖断闰年

 

}

function runNian(_year) {

上边包车型客车代码未有将js分离,假诺供给,间接分手就足以了

 

    if(_year%400 === 0 || (_year%4 === 0 && _year%100 !== 0) ) {

<!DOCTYPE html>
<head>
<meta charset='utf-8' />
<script type='text/javascript' src='./nino_calendar.js' ></script>
</head>

if(objtd!=undefined){

        return true;

<body>
<div id='calendar'>
</div>

    if(objtd=="choose_date_czw_empty"){

    }

</body>
<style type='text/css' >
#calendar{ margin:20px auto; width:200px;}
tr#nino_calendar_weekname,td.nino_calendar_tomonth,td.nino_calendar_nottomonth,td.nino_calendar_today{ font-family:"Arial","Microsoft Yahei"; text-align:center; padding:3px; cursor:crosshair;}
tr#nino_calendar_weekname td {background:#EEE; color:#000; }
tr#nino_calendar_weekname td:hover{background:#666; color:#FFF;}
td.nino_calendar_tomonth{ background:#EEE; color:#000;}
td.nino_calendar_tomonth:hover{background:#666; color:#FFF;}
td.nino_calendar_nottomonth{ background:#EEE; color:#FFF;}
td.nino_calendar_nottomonth:hover{background:#CCC; color:#666;}
td.nino_calendar_today{ background:#999; color:#FFF;}
td.nino_calendar_today:hover{background:#666; color:#FFF;}
input#nino_calendar_year_i,input#nino_calendar_month_i,input#nino_calendar_day_i{ width:40px;}
select#nino_calendar_year_select,select#nino_calendar_month_select{background:#444; color:#FFF;}
input#nino_calendar_b{ width:100%;}
</style>
<script type='text/javascript' >
/*
Calendar
use Nino_Calendar.setCalDays(2012,2,2)
Copyright 2013,  EI Nino
Email: [email protected]
*/
function stopBubble(){  
 if (window.event) {
  event.cancelBubble=true;
 } else {
  event = arguments[0];
  event.stopPropagation();
 }
}
var Nino_Calendar = {
 idName : "calendar",
 calId:"nino_calendar",
 monthDays : new Array(31,28,31,30,31,30,31,31,30,31,30,31),
 init: function(idName,calId){
  /*
  可选init,$1 为外界填充div的id,$2 为calendar的id和id前缀
  */
  Nino_Calendar.idName = idName;
  Nino_Calendar.calId=calId;
 },
 getMonthsDays:function (year){
   /*
   获取月份的天数
   */
  var date = new Date();
  if(arguments.length==0)
   var year=date.getFullYear();
  var monthDays=new Array(31,28,31,30,31,30,31,31,30,31,30,31);
  if((year%4==0)&&(year%100!=0) || (year%400==0))
  {
   monthDays[1]=29;
  }
  Nino_Calendar.monthDays=monthDays;
  return monthDays;
  },
 getTotalDays :function (d,m){
   /*
   获取总天数
   */
   if(arguments.length==0)
   {
    var d = date.getDate();
    var m = date.getMonth();
   }
   var days =0;
   var i=0
   for(; i<m; i++)
   {
    days += Nino_Calendar.monthDays[i];
   }
   return days+d;
  },
 setCalDays:function (year,month,day){
  /*
  设置日历
  */
  var date = new Date();
  if(arguments.length==0)
   var year = date.getFullYear();
  if(arguments.length<=1)
   var month = date.getMonth()+1;
  if(arguments.length<=2)
   var day = date.getDate();
  if(arguments.length==3){
   date = new Date(year,month,day);
  }

        document.getElementById(date_id).value="";

    else { return false; }

  Nino_Calendar.getMonthsDays(year);
  var cal = document.getElementById(Nino_Calendar.idName);
  var calBody="<table id='"+Nino_Calendar.calId+"'>";
  calBody +="<tr id='"+Nino_Calendar.calId+"_weekname'><td colspan=4 id='"+Nino_Calendar.calId+"_year' >"+year+" 年</td><td colspan=3 id='"+Nino_Calendar.calId+"_month' name='"+day+"' >"+month+" 月</td></tr>";
  calBody +="<tr id='"+Nino_Calendar.calId+"_weekname'><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>";
  month = month-1;
  var preMonthDays = Nino_Calendar.monthDays[(month==0 ? 11 : month-1)];
  var tmp_date = new Date(year,month,1);
  preMonthDays=preMonthDays-tmp_date.getDay();
  var i=0;
  
  for(var ii=preMonthDays+1; i<tmp_date.getDay(); i++,ii++)
  {
   if(i%7==0){
    calBody +="<tr class='"+Nino_Calendar.calId+"_day_num'>";
   }
   calBody +="<td class='"+Nino_Calendar.calId+"_nottomonth' >"+ii+"</td>";
   if(i%7==6)
   {
    calBody +="</tr>";
   }
  }
  for(var ii=1; ii<=Nino_Calendar.monthDays[month]; i++,ii++)
  {
   if(i%7==0){
    calBody +="<tr class='"+Nino_Calendar.calId+"_day_num'>";
   }
   if(ii==day)
   {
    calBody +="<td class='"+Nino_Calendar.calId+"_today' >"+ii+"</td>";
   }else{
   calBody +="<td class='"+Nino_Calendar.calId+"_tomonth' >"+ii+"</td>";
   }
   if(i%7==6)
   {
    calBody +="</tr>";
   }
  }
  for(var ii=1; i<42; i++,ii++)
  {
   if(i%7==0){
    calBody +="<tr class='"+Nino_Calendar.calId+"_day_num'>";
   }
   calBody +="<td class='"+Nino_Calendar.calId+"_nottomonth' >"+ii+"</td>";

    }else{

}

   if(i%7==6)
   {
    calBody +="</tr>";
   }
  }
  calBody +="<tr><td colspan=7><input id='"+Nino_Calendar.calId+"_year_i' type='text' />年<input id='"+Nino_Calendar.calId+"_month_i' type='text' />月<input id='"+Nino_Calendar.calId+"_day_i' type='text' />日</td></tr><tr><td  colspan=7><input id='"+Nino_Calendar.calId+"_b' type='button' value='set' /></td></tr></table>";
  cal.innerHTML=calBody;
  nino_calendar = document.getElementById(Nino_Calendar.calId);
  nino_calendar .addEventListener('click',Nino_Calendar.setHandle);
  nino_calendar_b = document.getElementById(Nino_Calendar.calId+"_b");
  nino_calendar_b.addEventListener('click',Nino_Calendar.setFromInput);
  
  document.getElementById(""+Nino_Calendar.calId+"_year_i").value=year;
  document.getElementById(""+Nino_Calendar.calId+"_month_i").value=month+1;
  document.getElementById(""+Nino_Calendar.calId+"_day_i").value=day;
  
  return calBody;
 },
 yearList:function(star,end){
  /*
  年份列表
  */
  if( document.getElementById(""+Nino_Calendar.calId+"_month_select"))
  {
   Nino_Calendar.setMonth();
  }
  var tmp_date = new Date();
  if(arguments.length==0)
  {
   var start =tmp_date.getFullYear()-10;
   var end =tmp_date.getFullYear()+10;
  }
  else if(arguments.length==1)
  {
   var end =start+10;
  }
  
  var Y = document.getElementById(""+Nino_Calendar.calId+"_year");
  var y= Y.innerHTML.substring(0,Y.innerHTML.indexOf(' '));

        var year1 = document.getElementById("choose_date_czw_year").value;

复制代码

  var list = "<select id=""+Nino_Calendar.calId+"_year_select">";
  for(var i=start; i<end; i++)
  {
   if(i==y)
    list +="<option value='"+i+"'  selected="selected" >"+i+"</option>";
   else list +="<option value='"+i+"' >"+i+"</option>";
  }
  list +="</select>";
  Y.innerHTML = list;
  var YS = document.getElementById(""+Nino_Calendar.calId+"_year_select");
  YS.addEventListener('change',Nino_Calendar.setYear);
  
  stopBubble();
 },
 setYear:function(){
  var Y = document.getElementById(""+Nino_Calendar.calId+"_year");
  var YS = document.getElementById(""+Nino_Calendar.calId+"_year_select");
  Y.innerHTML = YS.value+" 年";
  Nino_Calendar.setCal();
 },
 monthList:function(){
  if( document.getElementById(""+Nino_Calendar.calId+"_year_select"))
  {
   Nino_Calendar.setYear();
  }
  var M = document.getElementById(""+Nino_Calendar.calId+"_month");
  var Y = document.getElementById(""+Nino_Calendar.calId+"_year");
  var y= Y.innerHTML.substring(0,Y.innerHTML.indexOf(' '));
  var m= M.innerHTML.substring(0,M.innerHTML.indexOf(' '));
  Nino_Calendar.getMonthsDays(y);
  var list = "<select id=""+Nino_Calendar.calId+"_month_select">";
  for(var i=1; i<=12; i++)
  {
   if(i==m){
    list +="<option value='"+i+"'  selected="selected" >"+i+"</option>";
   }
   else{
    list +="<option value='"+i+"' >"+i+"</option>";
   }
  }
  list +="</select>";
  M.innerHTML = list;
  var MS = document.getElementById(""+Nino_Calendar.calId+"_month_select");
  MS.addEventListener('change',Nino_Calendar.setMonth);
 },
 setMonth:function(){
  var M = document.getElementById(""+Nino_Calendar.calId+"_month");
  var MS = document.getElementById(""+Nino_Calendar.calId+"_month_select");
  M.innerHTML = parseInt(MS.value)+" 月";
  
  Nino_Calendar.setCal();
 },
 setDay:function(day){
  var M = document.getElementById(""+Nino_Calendar.calId+"_month");
  M.setAttribute('name',day);
  Nino_Calendar.setCal();
 },
 setHandle:function(){
  
  if((typeof event)=="undefined")
   event = arguments[0];
  var obj = event.srcElement ? event.srcElement:event.target;
  var obj_id = obj.getAttribute('id');
  switch(obj_id){
   case ""+Nino_Calendar.calId+"_year":
   {
    Nino_Calendar.yearList();
    
    break;
   }
   case ""+Nino_Calendar.calId+"_month":
   {
    Nino_Calendar.monthList();
    break;
   }
   default:
   { 
    if(obj.className==""+Nino_Calendar.calId+"_nottomonth"){
     break;
    }
    day = obj.innerHTML;
    if(parseInt(day)>0&&parseInt(day)<=31)
    Nino_Calendar.setDay(day);
    break;
   }
  
  }
  stopBubble();
 },
 setCal:function(){
  var Y = document.getElementById(""+Nino_Calendar.calId+"_year");
  var M = document.getElementById(""+Nino_Calendar.calId+"_month");
  var yv= Y.innerHTML.substring(0,Y.innerHTML.indexOf(' '));
  var mv= M.innerHTML.substring(0,M.innerHTML.indexOf(' '));
  var dv= M.getAttribute('name');
  
  Nino_Calendar.setCalDays(yv,mv,dv);
 
 },
 setFromInput:function(){
  var yv=parseInt(document.getElementById(""+Nino_Calendar.calId+"_year_i").value);
  var mv=parseInt(document.getElementById(""+Nino_Calendar.calId+"_month_i").value);
  var dv=parseInt(document.getElementById(""+Nino_Calendar.calId+"_day_i").value);
  
  Nino_Calendar.setCalDays(yv,mv,dv);
 
 },
}
Nino_Calendar.init("calendar","nino_calendar");
Nino_Calendar.setCalDays();

        var month1 = document.getElementById("choose_date_czw_month").value;

二,判别某年某月的1号是星期几

 

        document.getElementById(date_id).value=year1+"-"+month1+"-"+objtd.innerHTML;

 

 

    }

复制代码

 

    document.getElementById("choose_date_czw_id").style.display="none";

//剖断某年某月的1号是星期几

</script>
</html>

    return;

function getFirstDay(_year,_month) {

 

}

    var allDay = 0, y = _year-1, i = 1;

 

var nstr=new Date(); //当前

    allDay = y + Math.floor(y/4) - Math.floor(y/100) + Math.floor(y/400)

效果:

if(document.getElementById("choose_date_czw_year")!=null){

  • 1;

 图片 1  

    var year = document.getElementById("choose_date_czw_year").value;

    for ( ; i<_month; i++) {

 

    var month = document.getElementById("choose_date_czw_month").value;

        switch (i) {

1,年份按此年度前后各10年选区范围,同一时候提供自由选用 2,月份选取3,日期的点击接收 4,FF浏览器帮助不佳!! 本领:HTML...

    var str=year+"/"+month+"/1";

            case 1: allDay += 31; break;

    nstr=new Date(str); //当前

            case 2: 

}

                if(runNian(_year)) { allDay += 29; }

var ynow=nstr.getFullYear(); //年份

                else { allDay += 28; }

var mnow=nstr.getMonth(); //月份

                break;

var dnow=nstr.getDate(卡塔尔; //几天今日期

            case 3: allDay += 31; break;

var n1str=new Date(ynow,mnow,1State of Qatar; //下一个月率后天

            case 4: allDay += 30; break;

var firstday=n1str.getDay(State of Qatar; //下月初后天星期几

            case 5: allDay += 31; break;

function is_leap(year) {

            case 6: allDay += 30; break;

   return (year%100==0 ? res=(year%400==0 ? 1 : 0) : res=(year%4==0 ? 1: 0));

            case 7: allDay += 31; break;

}

            case 8: allDay += 31; break;

var dstr="<select id="choose_date_czw_year" onchange="choose_date_czw('"+date_id+"')">";

            case 9: allDay += 30; break;

for(var y=1901;y<2050;y++){

            case 10: allDay += 31; break;

    if(y==ynow){

            case 11: allDay += 30; break;

        dstr+="<option value='"+y+"' selected>"+y+"</option>"

            case 12: allDay += 31; break;

    }else{

        }

        dstr+="<option value='"+y+"'>"+y+"</option>"

    }

    }

    return allDay%7;

}

}

dstr+="</select> <select id="choose_date_czw_month" onchange="choose_date_czw('"+date_id+"')">";

复制代码

for(var m=1;m<13;m++){

三,创制日历表格,呈现日历(表格应该在静态页面先写好构造和体裁,然后在那处拼接,这里仅做示范,不附样式)

    if(parseInt(mnow+1)==m){

 

        dstr+="<option value='"+m+"' selected>"+m+"</option>"

复制代码

    }else{

//凸显日历

        dstr+="<option value='"+m+"'>"+m+"</option>"

function showCalendar(_year,_month,_day,firstDay) {

    }

    var i = 0,

}

        monthDay = 0,

dstr+="</select> <span style='cursor:pointer;' onclick="choose_date_czw('choose_date_czw_close')">关闭</span>|<span style='cursor:pointer;' onclick="choose_date_czw('"+date_id+"','choose_date_czw_empty')">清空</span>";

        showStr = "",

//意气风发三五七四十腊(十7月卡塔尔,三十二十八日并非差;四六冬辰(十11月卡塔尔(قطر‎二十一日,独有五月六十四(闰年八十三State of Qatar.

        _classname = "",

var m_days = new Array(31,28+is_leap(ynow),31,30,31,30,31,31,30,31,30,31);

        today = new Date();

var tr_str=Math.ceil((m_days[mnow] + firstday)/7);

        //月份的气数

dstr+="<table border='0' cellpadding='5' cellspacing='0'><tr><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>";

    switch(_month) {

var dqdate=new Date(); //当前

        case 1: monthDay = 31; break;

for(i=0;i<tr_str;i++) { //外层for语句- tr标签

        case 2:

   dstr+="<tr>";

            if(runNian(_year)) { monthDay = 29; }

   for(k=0;k<7;k++) { //内层for语句- td标签

            else { monthDay = 28; }

      idx=i*7+k; //表格单元的本来序号

            break;

      date_str=idx-firstday+1; //总计日期

        case 3: monthDay = 31; break;

     if(date_str<=0 || date_str>m_days[mnow]){

        case 4: monthDay = 30; break;

          dstr+="<td> </td>";

        case 5: monthDay = 31; break;

     }else{

        case 6: monthDay = 30; break;

        if(ynow==dqdate.getFullYear() && mnow==dqdate.getMonth() && dqdate.getDate()==date_str){

        case 7: monthDay = 31; break;

            dstr+="<td onmouseover="this.style.backgroundColor='#6FF'" onmouseout="this.style.backgroundColor='#fff'" onclick="choose_date_czw('"+date_id+"',this)" style='cursor:pointer; background-color:#6FF;'>"+date_str+"</td>";

        case 8: monthDay = 31; break;

        }else{

        case 9: monthDay = 30; break;

            dstr+="<td onmouseover="this.style.backgroundColor='#6FF'" onmouseout="this.style.backgroundColor='#fff'" onclick="choose_date_czw('"+date_id+"',this)" style='cursor:pointer;'>"+date_str+"</td>";

        case 10: monthDay = 31; break;

        }

        case 11: monthDay = 30; break;

     }

        case 12: monthDay = 31; break;

   }

    }

   dstr+="</tr>";

 

}

    //输出日历表格,那豆蔻梢头部分因协会而异

dstr+="</table>";

    showStr = "<table class='cld-w'><thead>";

if(document.getElementById("choose_date_czw_id")==null){

    //日历尾部

var obj = document.getElementById(date_id);

    showStr += "<tr><th colspan='7'><div class='cld-hd'><span class='cld-pre'><</span><em id='showDate' value='" + _year + "-" + _month + "-" + _day + "'>"

var odiv = document.createElement("div");

  • _year + "年" + _month + "月" + _day + "日" + "</em><span class='cld-next'>></span></div></th></tr>";

odiv.id="choose_date_czw_id";

    //日历星期

odiv.innerHTML=dstr;

    showStr += "<tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>";

odiv.style.position="absolute";

    showStr += "</thead><tbody><tr>";

odiv.style.border="1px #0CF solid";

    //前段时期率后天前的空格

odiv.style.fontSize="12px";

    for (i=1; i<=firstDay; i++) {

odiv.style.zIndex=99999;

        showStr += "<td></td>";

odiv.style.top=obj.offsetTop+obj.offsetHeight+"px";

    }

odiv.style.left=obj.offsetLeft+"px";

    //显示当前月的天数

 

    for (i=1; i<=monthDay; i++) {

document.body.appendChild(odiv);

        //当日的日子

}else{

        if(_year === today.getFullYear() && _month === today.getMonth()+1 && i === today.getDate()) {

    document.getElementById("choose_date_czw_id").style.display="block";

            _classname = "cld-cur"; 

    document.getElementById("choose_date_czw_id").innerHTML=dstr;

        } 

}

        //当日事前的日期(那些论断是因为自个儿有工作急需,就是必要此前的日期不可能点击)

}

        else if(_year < today.getFullYear() || (_year === today.getFullYear() && _month <= today.getMonth()) || (_year === today.getFullYear() && _month === today.getMonth()+1 && i < today.getDate()) ) {

 

            _classname = "cld-old";

 

        }

调用格局如下:

        //别的普通的日期

 

        else { _classname = "cld-day"; }

加上日期:<input type="text" id="add_date" onclick="choose_date_czw('add_date')"/>

        //别的大于上月的月份的黄金年代致日期(为了让点击下七月的时候,雷同的日期扩张cld-cur类)

 

        if(_day === i && (_year > today.getFullYear() || _month > today.getMonth()+1)) { _classname = "cld-cur"; }

运营结果如下:

        //把日期存在对应的value       

 

        showStr += "<td class=" + _classname + " value='" + _year + "-" + _month + "-" + i + "'>" + i + "</td>";

图片 2

 

 

        firstDay = (firstDay+1)%7;

作者 Charles Olaes

        if(firstDay === 0 && i !== monthDay) {

...

            showStr += "</tr><tr>";

        } 

    }

    

    //剩余的空格

    if(firstDay!==0) {

        for (i=firstDay; i<7; i++) {

            showStr += "<td></td>";

        }

    }

        

    showStr +="</tr></tbody></table>";

    //插入calendar的页面构造里

    calendar.innerHTML = showStr;

}

复制代码

四,在日历的底部彰显当前的年月日

 

复制代码

//呈现年月日

function showDate(_year,_month,_day) {

    var date = "", firstDay = getFirstDay(_year,_month,_day);

    if(_day !== 0) {

        date = _year + "年" + _month + "月" +_day + "日";

    }

    else { date = "No Choose."; }

    document.getElementById("showDate"卡塔尔.innerHTML = date; //日历头部展现

    showCalendar(_year,_month,_day,firstDay卡塔尔;         //调用日历突显函数

}

复制代码

五,上四月和下四月

 

复制代码

//上一月

function preMonth(_year,_month,_day) {

    if(_month == 1) { showDate(_year - 1,12,_day); }

    else { showDate(_year,_month - 1,_day); }

}

//下一月

function nextMonth(_year,_month,_day) {

    if(_month == 12) { showDate(_year + 1,1,_day); }

    else { showDate(_year,_month + 1,_day); }

}

复制代码

六,初叶化,日历就出去了

 

复制代码

//初始化

var calendar = document.createElement('div');

calendar.setAttribute('id','showCld');

document.getElementById("box"State of Qatar.appendChild(calendar卡塔尔(قطر‎; //增至您的box里

 

//获取当天的年月日    

var today = new Date();

var _year = today.getFullYear(),

    _month = today.getMonth() + 1,

    _day = today.getDate();

var firstDay = getFirstDay(_year,_month);

 

//显示日历

showCalendar(_year,_month,_day,firstDay); 

复制代码

七,日历的点击事件

 

复制代码

//日历点击的事件委托(能够查看js冒泡的运用)

calendar.onclick = function(e) {

    var e = e || window.event;

    var target = e.srcElement || e.target;

//把日历的头顶的年月日分开成数组,这里保留在其value属性上

    dayArr = document.getElementById('showDate').getAttribute('value').split('-');

    if (target) {

        //尽管是可点击的日期

        if ( target.className === "cld-day" || target.className === "cld-cur" ) {

            dateArr = target.getAttribute('value').split('-');

            //减0是把字符串转形成数值类型,以下同样            

            showDate(dateArr[0]-0,dateArr[1]-0,dateArr[2]-0);

            calendar.className = "";

        } 

        //要是是上1月的点击

        else if ( target.className === "cld-pre" ) {

            preMonth(dayArr[0]-0,dayArr[1]-0,dayArr[2]-0);

        }

        //如若是下7月的点击

        else if ( target.className === "cld-next" ) {

            nextMonth(dayArr[0]-0,dayArr[1]-0,dayArr[2]-0);

        }

    }

};

复制代码

 

 

 ——把解释都写着代码里了,代码函数相当的短小粗暴,不能,本身对js世襲封装还不熟呢。

 

首先申明,方法是有参照网络一些资料的,比方闰年的判断,譬喻各种月第一天是星期几的论断。不说太多,拆分出一个个函数,希望...

本文由10bet手机官网发布于微服架构,转载请注明出处:最简约JS日历控件,原生JS实现日历

上一篇:显示访客停留时间,jquery倒计时效果 下一篇:没有了
猜你喜欢
热门排行
精彩图文