【转】日历控件记录
公司需要一个日历打卡显示的页面,初步决定使用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"><</span> <span id="topDate"></span> <span id="right">></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>
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)); }
<script language=Javascript>
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>
<input name=haha type=button value="本周第一天" onclick=alert(getWeekFirstDay(0))><br />
<input name=haha type=button value="本周第七天" onclick=alert(getWeekLastDay(0))><br />
<input name=haha type=button value="本月第一天" onclick=alert(getMonthFirstDay(0))><br />
<input name=haha type=button value="本月最后一天" onclick=alert(getMonthLastDay(0))><br />
<input name=haha type=button value="推前两天" onclick=alert(getDiffDate(-2,0))><br />
<input name=haha type=button value="推后两天" onclick=alert(getDiffDate(2,0))><br />
<input name=haha type=button value="相差多个?" onclick=alert(DateDiff('d','2007/04/05','2008/01/02'))><br />
<input name=haha type=button value="日期随意加减" onclick=alert(DateAdd('d',2,'2007/04/05',0))><br />
<input name=haha type=button value="取得当前日期" onclick=alert(getToDay(0))><br />
<input name=haha type=button value="取得上月第一天" onclick=alert(getPreviousFirstDay(0))><br />
<input name=haha type=button value="取得上月最后一天" onclick=alert(getPreviousLastDay(0))><br />
<input name=haha type=button value="取得上周第一天" onclick=alert(getPreviousFirstWeekDay(0))><br />
<input name=haha type=button value="取得上周最后一天" onclick=alert(showPreviousLastWeekDay(0))><br />
<input name=haha type=button value="昨天" onclick=alert(getPreviousDay(0))><br />
<input name=haha type=button value="今天" onclick=alert(getToDay(0))><br />
<input name=haha type=button value="明天" onclick=alert(getNextDay(0))><br />
<input name=haha type=button value="下周第一天" onclick=alert(getNextFirstWeekDay(0))><br />
<input name=haha type=button value="下周最后一天" onclick=alert(getNextLastWeekDay(0))><br />
<input name=haha type=button value="下月第一天" onclick=alert(getNextFirstDay(0))><br />
<input name=haha type=button value="下月最后一天" onclick=alert(getDateFromString(2007-07-07))><br />
<input id=button type=button value="test" onclick=alert('weixinjie'.Left(2))>
<input id=button type=button value="tt" onclick=getDateList()>