基于jquery实现日历效果

作者: 小龅牙o哔哔哔
来源: 51数据库
2021-07-03

本文实例为大家分享了jquery实现日历效果的具体代码，供大家参考，具体内容如下

/**
 * 2021/3/6
 * calendar
 */
 
/* get y year m month before days
 */
function getbdays( y, m ) {
 return (new date(y, m, 1).getday());
}
 
/* get y year m month total days
 */
function gettdays( y, m ) {
 return (new date(y, m + 1, -1).getdate() + 1);
}
 
/* get y year m month last days
 */
function getbmdays( y, m ) {
 return (new date(y, m, -1).getdate() + 1);
}
 
function calendar( nowdate ) {
 // year, month, day
 this.year = nowdate.getfullyear();
 this.month = nowdate.getmonth();
 this.day = nowdate.getdate();
 
 // before days
 this.beforedays = getbdays(this.year, this.month);
 // current month days
 this.totaldays = gettdays(this.year, this.month);
 // last month days
 this.lastdays = getbmdays(this.year, this.month);
 
 // save now date
 this.nowy = nowdate.getfullyear();
 this.nowm = nowdate.getmonth();
}
 
calendar.prototype.initcalendar = function() {
 // get calendar id 
 let caldiv = $("#calendar").append("<table></table>");
 
 // get calendar table
 let caltable = $("#calendar > table");
 
 // add calendar table tr
 for ( let n = 0; n < 8; n++ ) {
 caltable.append('<tr></tr>');
 }
 
 // get calendar table tr : header
 let calheadtr = $("#calendar > table > tr:first");
 
 // add calendar table tr th
 for ( let n = 0; n < 3; n++ ) {
 calheadtr.append('<th></th>');
 }
 
 // select index > 0 tr
 let calbodytr = $("#calendar > table > tr:gt(0)");
 
 // add calendar table tr td
 for ( let n = 0; n < 7; n++ ) {
 calbodytr.append('<td></td>');
 }
}
 
calendar.prototype.insertdate = function( calname ) {
 // get calendar table tr td : header
 let calheadth = $("#calendar > table > tr:first > th");
 
 // modify header content
 $(calheadth[0]).html("<a><</a>");
 $(calheadth[1]).html(`<a>${this.year} 年 ${this.month + 1} 月</a>`);
 $(calheadth[2]).html("<a>></a>");
 
 // add style to header
 $(calheadth[1]).attr({
 "colspan" : 5,
 "title" : calname
 });
 
 // weekday arrays
 const calweekarr = ['日', '一', '二', '三', '四', '五', '六'];
 
 // get calendar table tr td : weekdays
 let calweektd = $("#calendar > table > tr:eq(1) > td");
 for ( let n = 0; n < 7; n++ ) {
 $(calweektd[n]).html(`<a>${calweekarr[n]}</a>`);
 }
 
 // get calendar table tr td : body
 let calbodytd = $("#calendar > table > tr:gt(1) > td");
 
 // insert before days
 for (let n = this.beforedays - 1, lastdays = this.lastdays;
 n >= 0;
 n--, lastdays--) {
 $(calbodytd[n]).html(`<a>${lastdays}</a>`); 
 $(calbodytd[n]).attr("class", "other-day");
 }
 // insert current days
 for (let n = this.beforedays, i = 1;
  i <= this.totaldays; 
  i++, n++) {
 $(calbodytd[n]).html(`<a>${i}</a>`);
 
 if (i == this.day && 
  (new date(this.year, this.month, 1).getmonth() == this.nowm) &&
  (new date(this.year, this.month, 1).getfullyear() == this.nowy)) {
 $(calbodytd[n]).attr("class", "now-day");
 }
 else {
 $(calbodytd[n]).removeattr("class", "now-day");
 }
 }
 
 // insert after days
 for (let n = this.beforedays + this.totaldays, i = 1;
 n < calbodytd.length;
 n++, i++) {
 $(calbodytd[n]).html(`<a>${i}</a>`);
 $(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();
 
 // before days
 this.beforedays = getbdays(this.year, this.month);
 // current month days
 this.totaldays = gettdays(this.year, this.month);
 // last month days
 this.lastdays = getbmdays(this.year, this.month);
}
 
function initdate() {
 // create date object
 let now = new date();
 let cal = new calendar( now );
 
 // init and insert
 cal.initcalendar();
 cal.insertdate( 'mydate' );
 
 // add click event to th:first
 $("#calendar > table > tr:first > th:first").click(function(){
 now.setmonth( now.getmonth() - 1 );
 cal.update( now );
 cal.insertdate( 'mydate' );
 });                         
 
 // add click event to th:last
 $("#calendar > table > tr:first > th:last").click(function(){
 now.setmonth( now.getmonth() + 1 );
 cal.update( now );
 cal.insertdate( 'mydate' );
 });
}
 
initdate();

html

<!doctype html>
<html>
 <head>
 <meta charset="utf-8" />
 <title>document</title>
 <link  rel="stylesheet" media="screen">
 </head>
 <body>
 <div id="calendar"></div>
 <script src="js/jquery.js"></script>
 <script src="js/datecal.js"></script>
 </body>
</html>

css:

#calendar {
 width: 200px;
 padding-bottom: 5px;
 box-shadow: 0 1px 3px #ccc;
 border: 1px solid #ededed;
}
 
#calendar table {
 width: inherit;
 text-align: center;
 user-select: none;
 font-family: "comic sans ms";
 border-collapse: collapse;
 border-spacing: 0px;
}
 
#calendar table tr th {
 background: #f8f8f8;
 font-size: 12px;
}
 
#calendar table tr:nth-child(2) {
 background: #f8f8f8;
}
 
#calendar table tr td {
 font-size: 10px;
}
 
#calendar table tr td.now-day {
 color: red;
}
 
#calendar table tr td.other-day {
 color: lightgray;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。