基于jquery实现日历效果

2023-07-04 06:11:03 87

/** *2021/3/6 *Calendar */ /*getyYearmMonthbeforedays */ functiongetBDays(y,m){ return(newDate(y,m,1).getDay()); } /*getyYearmMonthtotaldays */ functiongetTDays(y,m){ return(newDate(y,m+1,-1).getDate()+1); } /*getyYearmMonthlastdays */ functiongetBMDays(y,m){ return(newDate(y,m,-1).getDate()+1); } functionCalendar(nowDate){ //year,month,day this.year=nowDate.getFullYear(); this.month=nowDate.getMonth(); this.day=nowDate.getDate(); //beforedays this.beforeDays=getBDays(this.year,this.month); //currentmonthdays this.totalDays=getTDays(this.year,this.month); //lastmonthdays this.lastDays=getBMDays(this.year,this.month); //savenowdate this.nowY=nowDate.getFullYear(); this.nowM=nowDate.getMonth(); } Calendar.prototype.initCalendar=function(){ //getcalendarid letcalDiv=$("#Calendar").append("

"); //getcalendartable letcalTable=$("#Calendar>table"); //addcalendartabletr for(letn=0;n<8;n++){ calTable.append(''); } //getcalendartabletr:header letcalHeadTr=$("#Calendar>table>tr:first"); //addcalendartabletrth for(letn=0;n<3;n++){ calHeadTr.append(''); } //selectindex>0tr letcalBodyTr=$("#Calendar>table>tr:gt(0)"); //addcalendartabletrtd for(letn=0;n<7;n++){ calBodyTr.append(''); } } Calendar.prototype.insertDate=function(calName){ //getcalendartabletrtd:header letcalHeadTh=$("#Calendar>table>tr:first>th"); //modifyheadercontent $(calHeadTh[0]).html("<"); $(calHeadTh[1]).html(`${this.year}年${this.month+1}月`); $(calHeadTh[2]).html(">"); //addstyletoheader $(calHeadTh[1]).attr({ "colspan":5, "title":calName }); //weekdayarrays constcalWeekArr=['日','一','二','三','四','五','六']; //getcalendartabletrtd:weekdays letcalWeekTd=$("#Calendar>table>tr:eq(1)>td"); for(letn=0;n<7;n++){ $(calWeekTd[n]).html(`${calWeekArr[n]}`); } //getcalendartabletrtd:body letcalBodyTd=$("#Calendar>table>tr:gt(1)>td"); //insertbeforedays for(letn=this.beforeDays-1,lastDays=this.lastDays; n>=0; n--,lastDays--){ $(calBodyTd[n]).html(`${lastDays}`); $(calBodyTd[n]).attr("class","other-day"); } //insertcurrentdays for(letn=this.beforeDays,i=1; i<=this.totalDays; i++,n++){ $(calBodyTd[n]).html(`${i}`); if(i==this.day&& (newDate(this.year,this.month,1).getMonth()==this.nowM)&& (newDate(this.year,this.month,1).getFullYear()==this.nowY)){ $(calBodyTd[n]).attr("class","now-day"); } else{ $(calBodyTd[n]).removeAttr("class","now-day"); } } //insertafterdays for(letn=this.beforeDays+this.totalDays,i=1; n${i}`); $(calBodyTd[n]).attr("class","other-day"); } } Calendar.prototype.update=function(newDate){ //year,month,day this.year=newDate.getFullYear(); this.month=newDate.getMonth(); this.day=newDate.getDate(); //beforedays this.beforeDays=getBDays(this.year,this.month); //currentmonthdays this.totalDays=getTDays(this.year,this.month); //lastmonthdays this.lastDays=getBMDays(this.year,this.month); } functioninitDate(){ //createDateobject letnow=newDate(); letcal=newCalendar(now); //initandinsert cal.initCalendar(); cal.insertDate('MyDate'); //addclickeventtoth:first $("#Calendar>table>tr:first>th:first").click(function(){ now.setMonth(now.getMonth()-1); cal.update(now); cal.insertDate('MyDate'); }); //addclickeventtoth:last $("#Calendar>table>tr:first>th:last").click(function(){ now.setMonth(now.getMonth()+1); cal.update(now); cal.insertDate('MyDate'); }); } initDate();

#Calendar{ width:200px; padding-bottom:5px; box-shadow:01px3px#ccc; border:1pxsolid#EDEDED; } #Calendartable{ width:inherit; text-align:center; user-select:none; font-family:"ComicSansMS"; border-collapse:collapse; border-spacing:0px; } #Calendartabletrth{ background:#f8f8f8; font-size:12px; } #Calendartabletr:nth-child(2){ background:#f8f8f8; } #Calendartabletrtd{ font-size:10px; } #Calendartabletrtd.now-day{ color:red; } #Calendartabletrtd.other-day{ color:lightgray; }

基于jquery实现日历效果

热门推荐

随机推荐