基于jquery实现日历效果
更新时间：2021年03月14日 13:30:42 作者：清静清源
这篇文章主要为大家详细介绍了基于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的输入控件及回车事件的应用，具体示例代码如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助2013-07-07
这篇文章主要详细介绍了jquery图片播放浏览插件prettyPhoto使用方法，以及支持的每种类型的详细示例，非常的不错，有需要的小伙伴参考下2014-12-12
String的Trim()方法失效,在ie8下是有这样的情况的，解决方法也很简单使用$.trim(str)即可，需要的朋友可以了解下2013-11-11
layer是一款近年来备受青睐的web弹层组件，她具备全方位的解决方案，致力于服务各水平段的开发人员，您的页面会轻松地拥有丰富友好的操作体验，接下来通过本文给大家介绍layui常用方法，需要的朋友参考下2016-07-07
这篇文章主要介绍了jQuery实现拖拽页面元素并将其保存到cookie的方法,涉及jQuery基于cookie针对页面元素属性的相关保存操作技巧,需要的朋友可以参考下2016-06-06
本文主要介绍jQuery获取radio选中项的值的方法，希望能帮到大家，有需要的朋友可以参考一下。2016-06-06
这篇文章主要为大家详细介绍了jQuery表单验证插件与日历插件的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
这篇文章主要介绍了jQuery使用ajaxSubmit()提交表单示例,使用延第三方插件jquery.form实现,需要的朋友可以参考下2014-04-04
本文搜集了大量 jQuery 表格插件，帮助 Web 设计者更好地驾御 HTML 表格，你可以对表格进行横向和竖向排序，设置固定表头，对表格进行搜索，对大表格进行分页，对表格进行滚动，拖放操作等等。这些插件很多都包含详细的教程。2010-04-04
这篇文章主要介绍了jQuery实现带有动画效果的回到顶部和底部代码,涉及jQuery响应鼠标事件动态操作页面元素属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-11-11
最新评论