• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

基于jquery实现日历效果

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文实例为大家分享了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;
}

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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
基于jquery实现轮播图效果发布时间:2022-02-05
下一篇:
原生Js实现日历挂件发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap