基于jquery实现日历效果

本文实例为大家分享了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 href="css/dateCal.css" 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;
}
    

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

• 基于jquery实现日历签到功能
• jQuery EasyUI API 中文文档 - Calendar日历使用
• 为开发者准备的10款最好的jQuery日历插件
• jQuery简单实现日历的方法
• jQuery写的日历(包括日历的样式及功能)
• jQuery 联动日历实现代码
• .net mvc页面UI之Jquery博客日历控件实现代码
• php+mysql+jquery实现日历签到功能
• JQuery日历插件My97DatePicker日期范围限制
• Jquery日历插件制作简单日历

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！