【转】日历控件记录

公司需要一个日历打卡显示的页面，初步决定使用js来做，于是在网上搜索了一下，找到一个代码，修改了一下。在这里记录一下

日历控件代码（html css js）

代码来源：https://www.cnblogs.com/lamian77/p/11872008.html

建议看源链接代码比较清晰

HTML部分

<body>
   <div class="cldBody">
       <table>
          <thead>
               <tr>
                   <td colspan="7">
                       <div class="top">
                           <span id="left">&lt;</span>
                           <span id="topDate"></span>
                           <span id="right">&gt;</span>
                       </div>
                   </td>
               </tr>
               <tr id="week" >
                   <td>日</td>
                   <td>一</td>
                   <td>二</td>
                   <td>三</td>
                   <td>四</td>
                   <td>五</td>
                   <td>六</td>
               </tr>
           </thead>
           <tbody id="tbody" ></tbody>
       </table>
  </div>
</body>

View Code

CSS部分

<style type="text/css">
      .cldBody{background:#f7f7f7;width: 420px;margin: 10px auto;}
      .cldBody .top{height: 60px;line-height: 60px;text-align: center;position: relative;}
      #topDate{font-size: 24px;}
      #week td{font-size: 15px;}
      td{width: 60px; height: 60px;line-height: 60px;text-align: center;font-size: 20px;}
      #tbody td:hover{background: #ededed;cursor: pointer;}
      .curDate{color: red;font-weight: bold;}
      #left,#right{width: 60px;height: 60px;position: absolute;cursor: pointer;}
      #left{left: 0;}
      #right{right: 0;}
      #left:hover, #right:hover{background-color: rgba(30, 30, 30, 0.2);}
  </style>

JS部分

<script src="Scripts/jquery-1.10.2.min.js" type="text/javascript" ></script>

var date = new Date();
var year = date.getFullYear();
var nowyear = date.getFullYear();
var month = date.getMonth()+1;
var nowmonth = date.getMonth()+1;
var dateday = date.getDate();
var todateHtml = year + '年'+ month + '月';
$('#topDate').text(todateHtml)

function showcld(){        
  var monthDay = [31,28,31,30,31,30,31,31,30,31,30,31];  // 创建数组存放每个月有多少天 ,默认2月为28天
  // 判断闰年
  if(year % 4 == 0 && year %100 != 0 || year % 400 == 0){
      monthDay[1] = 29;
  }
  // 计算每个月的天数
  var days = monthDay[month-1];   
  // 判断每月第一天为周几
  date.setYear(year);        //某年
  date.setMonth(month-1);   //某年的某月
  date.setDate(1);   // 某月的某天
  var weekday = date.getDay();  // 判断某天是周几
  // 补齐一号前的空格
  var tbodyHtml = '<tr>';
  for(var i = 0; i<weekday; i++){
      tbodyHtml += "<td></td>";
  }
  // 补齐每月的日期
  var changLine = weekday;
  var tagClass = '';
  for(i=1; i<=days; i++){//每一个日期的填充
      if(year == nowyear && month == nowmonth && i == dateday) {
               tagClass = "curDate";//当前日期对应格子
                }else{
                    tagClass = "isDate";
                }
      tbodyHtml += "<td class=" + tagClass + ">" + i + "</td>";
      changLine = (changLine+1)%7;
      if(changLine == 0 && i != days){//是否换行填充的判断
          tbodyHtml += "</tr><tr>";
      } 
    }
  $('#tbody').empty();   // 清空原有的内容
  $('#tbody').append(tbodyHtml);   //添加当前月份的日期内容
}

// 设置按钮点击事件
$('#left').click(function(){
    month = month-1;
    if(month < 1){
            month = 12;
            year--;
    }
    var todateHtml = year + '年'+ month + '月';
    $('#topDate').text(todateHtml);
    showcld();
});
        
$('#right').click(function(){
    month = month+1;
    if(month > 12){
            month = 1;
            year++;
    }
    var todateHtml = year + '年'+ month + '月';
    $('#topDate').text(todateHtml);
    showcld();
})    
 showcld();  //页面加载后执行函数

JS日期操作方法

原文链接：https://www.cnblogs.com/jackson-leung/p/4131878.html

日期自动补“0”

//日期自动补零程序

function appendZero(n)

{

        return(("00"+ n).substr(("00"+ n).length-2));

}

String.prototype.Left = function(len){

if(isNaN(len)||len==null){

len = 0;

} else {

if(parseInt(len)<0||parseInt(len)>this.length) {

len = 0;

}

return this.substr(0,this.length-len)+'**';

}

//日期自动补零程序

function appendZero(n)

{

return(("00"+ n).substr(("00"+ n).length-2));

}

//获得当年当月最大天数

function GetMonthMaxDay(theYear,theMonth){

var theDays = new Array(31,28,31,30,31,30,31,31,30,31,30,31);

var theMonthDay = 0, tmpYear = this.formatYear(theYear);

theMonthDay = theDays[theMonth];

if (theMonth == 1){ //theMonth is February

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

theMonthDay++;

}

return(theMonthDay);

}

//把年份格式化成4位

function formatYear(theYear){

var tmpYear = parseInt(theYear,10);

if (tmpYear < 100){

tmpYear += 1900;

if (tmpYear < 1940){

tmpYear += 100;

}

if (tmpYear < this.MinYear){

tmpYear = this.MinYear;

}

if (tmpYear > this.MaxYear){

tmpYear = this.MaxYear;

}

return(tmpYear);

}

//对javascript日期进行格式化

//formattype是返回的时间类型

//返回：返回时间串

function formatDate(day,formattype){

var dateString = "";

var thisyear = formatYear(day.getFullYear());

var thismonth = appendZero(day.getMonth()+1);

var thisday = appendZero(day.getDate());

var thishour = appendZero(day.getHours());

var thismin = appendZero(day.getMinutes());

var thissec = appendZero(day.getSeconds());

switch (formattype){

case 0:

dateString = thisyear + "年" + thismonth + "月" + thisday + "日";

break;

case 1:

dateString = thisyear + "-" + thismonth + "-" + thisday;

break;

case 2:

dateString = thisyear + "-" + thismonth + "-" + thisday+ " " + appendZero(thishour) + ":" + appendZero(thismin) + ":" + appendZero(thissec);

break;

default:

dateString = thisyear + "-" + thismonth + "-" + thisday;

}

return dateString;

}

//取得本周第一天

function getWeekFirstDay(formattype)

{

var Nowdate=new Date();

var WeekFirstDay=new Date(Nowdate-(Nowdate.getDay()-1)*86400000);

return formatDate(WeekFirstDay,formattype);

}

//取得本周第七天

function getWeekLastDay(formattype)

{

var Nowdate=new Date();

var WeekFirstDay=new Date(Nowdate-(Nowdate.getDay()-1)*86400000);

var WeekLastDay=new Date((WeekFirstDay/1000+6*86400)*1000);

return formatDate(WeekLastDay,formattype);

}

function testDate() {

var Nowdate=new Date();

//本月

var MonthFirstDay=new Date(Nowdate.getFullYear(),Nowdate.getMonth(),1);

alert(MonthFirstDay.getFullYear())

alert(appendZero(MonthFirstDay.getMonth()+1))

//上月

var lastMonth = new Date(Nowdate.getFullYear(),Nowdate.getMonth()-1,1);

alert(lastMonth.getFullYear())

alert(appendZero(lastMonth.getMonth()+1))

}

//取得本月第一天

function getMonthFirstDay(formattype)

{

var Nowdate=new Date();

var MonthFirstDay=new Date(Nowdate.getFullYear(),Nowdate.getMonth(),1);

return formatDate(MonthFirstDay,formattype);

}

//取得本月最后一天

function getMonthLastDay(formattype)

{

var Nowdate=new Date();

var MonthNextFirstDay=new Date(Nowdate.getFullYear(),Nowdate.getMonth()+1,1);

var MonthLastDay=new Date(MonthNextFirstDay-86400000);

return formatDate(MonthLastDay,formattype);

}

function getDateFromString(strDate){

var arrYmd = strDate.split("-");

for(var i=0;i<arrYmd.length;i++){

if(arrYmd[i].length>1 && arrYmd[i].indexOf("0")==0)

arrYmd[i]= arrYmd[i].substring(1);

}

var numYear = parseInt(arrYmd[0]);

var numMonth = parseInt(arrYmd[1]) - 1;

var numDay = parseInt(arrYmd[2]);

return new Date(numYear, numMonth, numDay);

}

下列函数返回需要的时间偏移值不能大于30

参数：dadd是日偏移值，-表示向前推，+向后推

formattype是返回的时间类型

返回：返回时间串

function getDiffDate(dadd,formattype)

{

//可以加上错误处理

var a = new Date();

a = a.valueOf();

a = a + dadd * 24 * 60 * 60 * 1000;

a = new Date(a);

return formatDate(a,formattype);

}

//getDiffDate(+2,0)

//取得指定日期的年月日时分秒

//参数：dateValue 是格式形如：2007/04/05

function TimeCom(dateValue){

var newCom = new Date(dateValue);

this.year = newCom.getFullYear();

this.month = newCom.getMonth()+1;

this.day = newCom.getDate();

this.hour = newCom.getHours();

this.minute = newCom.getMinutes();

this.second = newCom.getSeconds();

this.msecond = newCom.getMilliseconds();

this.week = newCom.getDay();

}

//取得两个日期之间的时间差

//参数：interval : y或year-表示取得相差的年份 n或month-表示相差的月份 d或day表示相差的天数 h或hour-表示相差的小时 m或minute-表示相差的分钟 s或second-表示相差的秒数 ms或msecond-表示相差的毫秒数 w或week-表示相差的周数

// date1:起始日期

// date2:结束日期

function DateDiff(interval,date1,date2)

{

var TimeCom1 = new TimeCom(date1);

var TimeCom2 = new TimeCom(date2);

var result;

switch(String(interval).toLowerCase())

{

case "y":

case "year":

result = TimeCom1.year-TimeCom2.year;

break;

case "n":

case "month":

result = (TimeCom1.year-TimeCom2.year)*12+(TimeCom1.month-TimeCom2.month);

break;

case "d":

case "day":

result = Math.round((Date.UTC(TimeCom1.year,TimeCom1.month-1,TimeCom1.day)-Date.UTC(TimeCom2.year,TimeCom2.month-1,TimeCom2.day))/(1000*60*60*24));

break;

case "h":

case "hour":

result = Math.round((Date.UTC(TimeCom1.year,TimeCom1.month-1,TimeCom1.day,TimeCom1.hour)-Date.UTC(TimeCom2.year,TimeCom2.month-1,TimeCom2.day,TimeCom2.hour))/(1000*60*60));

break;

case "m":

case "minute":

result = Math.round((Date.UTC(TimeCom1.year,TimeCom1.month-1,TimeCom1.day,TimeCom1.hour,TimeCom1.minute)-Date.UTC(TimeCom2.year,TimeCom2.month-1,TimeCom2.day,TimeCom2.hour,TimeCom2.minute))/(1000*60));

break;

case "s":

case "second":

result = Math.round((Date.UTC(TimeCom1.year,TimeCom1.month-1,TimeCom1.day,TimeCom1.hour,TimeCom1.minute,TimeCom1.second)-Date.UTC(TimeCom2.year,TimeCom2.month-1,TimeCom2.day,TimeCom2.hour,TimeCom2.minute,TimeCom2.second))/1000);

break;

case "ms":

case "msecond":

result = Date.UTC(TimeCom1.year,TimeCom1.month-1,TimeCom1.day,TimeCom1.hour,TimeCom1.minute,TimeCom1.second,TimeCom1.msecond)-Date.UTC(TimeCom2.year,TimeCom2.month-1,TimeCom2.day,TimeCom2.hour,TimeCom2.minute,TimeCom2.second,TimeCom1.msecond);

break;

case "w":

case "week":

result = Math.round((Date.UTC(TimeCom1.year,TimeCom1.month-1,TimeCom1.day)-Date.UTC(TimeCom2.year,TimeCom2.month-1,TimeCom2.day))/(1000*60*60*24)) % 7;

break;

default:

result = "invalid";

}

return(result);

}

下列函数返回需要的时间偏移值不能大于30

参数：interval : y或year-表示取得相差的年份 n或month-表示相差的月份 d或day表示相差的天数 h或hour-表示相差的小时 m或minute-表示相差的分钟 s或second-表示相差的秒数 ms或msecond-表示相差的毫秒数 w或week-表示相差的周数

num是偏移值，-表示向前推，+向后推

dateValue 指定的日期

formattype是返回的时间类型

返回：返回时间串

function DateAdd(interval,num,dateValue,formattype)

{

var newCom = new TimeCom(dateValue);

switch(String(interval).toLowerCase())

{

case "y": case "year": newCom.year += num; break;

case "n": case "month": newCom.month += num; break;

case "d": case "day": newCom.day += num; break;

case "h": case "hour": newCom.hour += num; break;

case "m": case "minute": newCom.minute += num; break;

case "s": case "second": newCom.second += num; break;

case "ms": case "msecond": newCom.msecond += num; break;

case "w": case "week": newCom.day += num*7; break;

default: return("invalid");

}

var now = newCom.year+"/"+newCom.month+"/"+newCom.day+" "+newCom.hour+":"+newCom.minute+":"+newCom.second;

return formatDate(new Date(now),formattype);

}

//alert(DateAdd('d',-30,new Date(),0));

//取得当前日期

function getToDay(formattype){

var Nowdate=new Date();

M=Number(Nowdate.getMonth())+1;

Nowdate = new Date(Nowdate.getFullYear()+"/"+M+"/"+Nowdate.getDate());

return formatDate(Nowdate,formattype);

}

//上月第一天

function getPreviousFirstDay(formattype)

{

var Nowdate=new Date();

var MonthFirstDay=new Date(Nowdate.getFullYear(),Nowdate.getMonth()-1,1);

return formatDate(MonthFirstDay,formattype);

}

//上月最后一天

function getPreviousLastDay(formattype)

{

var Nowdate=new Date();

var MonthFirstDay=new Date(Nowdate.getFullYear(),Nowdate.getMonth(),1);

return formatDate(new Date(MonthFirstDay-86400000),formattype);

}

//上周第一天

function getPreviousFirstWeekDay(formattype)

{

var Nowdate=new Date();

var WeekFirstDay=new Date(Nowdate-(Nowdate.getDay()-1)*86400000);

WeekFirstDay=new Date(WeekFirstDay-86400000*7);

return formatDate(WeekFirstDay,formattype);

}

//上周最后一天

function showPreviousLastWeekDay(formattype)

{

var Nowdate=new Date();

var WeekFirstDay=new Date(Nowdate-(Nowdate.getDay()-1)*86400000);

WeekFirstDay = new Date(WeekFirstDay-86400000);

return formatDate(WeekFirstDay,formattype);

}

//上一天

function getPreviousDay(formattype)

{

var MonthFirstDay=new Date();

MonthFirstDay = new Date(MonthFirstDay-86400000);

return formatDate(MonthFirstDay,formattype);

}

//下一天

function getNextDay(formattype)

{

var MonthFirstDay=new Date();

MonthFirstDay = new Date((MonthFirstDay/1000+86400)*1000);

return formatDate(MonthFirstDay,formattype);

}

//下周第一天

function getNextFirstWeekDay(formattype)

{

var Nowdate=new Date();

var WeekFirstDay=new Date(Nowdate-(Nowdate.getDay()-1)*86400000);

var MonthFirstDay=new Date((WeekFirstDay/1000+6*86400)*1000);

MonthFirstDay=new Date((MonthFirstDay/1000+86400)*1000);

return formatDate(MonthFirstDay,formattype);

}

//下周最后一天

function getNextLastWeekDay(formattype)

{

var Nowdate=new Date();

var WeekFirstDay=new Date(Nowdate-(Nowdate.getDay()-1)*86400000);

var WeekLastDay=new Date((WeekFirstDay/1000+6*86400)*1000);

var MonthFirstDay=new Date((WeekLastDay/1000+7*86400)*1000);

return formatDate(MonthFirstDay,formattype);

}

//下月第一天

function getNextFirstDay(formattype)

{

var Nowdate=new Date();

var MonthFirstDay=new Date(Nowdate.getFullYear(),Nowdate.getMonth(),1);

MonthFirstDay=new Date(MonthFirstDay.getYear(),MonthFirstDay.getMonth()+1,1);

return formatDate(MonthFirstDay,formattype);

}

//下月最后一天

function getNextLastDay(formattype)

{

var Nowdate=new Date();

var MonthFirstDay=new Date(Nowdate.getFullYear(),Nowdate.getMonth(),1);

MonthFirstDay=new Date(new Date(MonthFirstDay.getYear(),MonthFirstDay.getMonth()+2,1)-86400000);

return formatDate(MonthFirstDay,formattype);

}

function getDateList(){

var d = new Date('2007/07/07');

alert(d.getMonth())

}

</script>

【转】日历控件记录

猜你喜欢