基于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;
}

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

赞 (0)

相关推荐

  • .net mvc页面UI之Jquery博客日历控件实现代码

    .net mvc页面UI之Jquery博客日历控件实现代码

    一.效果图 二.页面文件 页面上需要添加<div id="cal"></div>标记. 三.JS代码 复制代码 代码如下: // JavaScript 日历 $(document).ready(function () { //当前时间 $now = new Date();                      //当前的时间 $nowYear = $now.getFullYear();          //当前的年 $nowMonth = $now.get

  • 基于jquery实现日历签到功能

    基于jquery实现日历签到功能

    在一些任务游戏.贴吧管理中都会有一个签到功能,帮助大家记录登录天数,积累等级经验,这个日历签到功能是如何实现的,本文为大家进行演. 本文实例讲述了基于jquery实现日历签到功能.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml

  • jQuery 联动日历实现代码

    jQuery 联动日历实现代码

    来看下效果图 一.先来说下功能: 1.点击"确定"显示日历 2.再次点击隐藏,或从DOM中删除这个日历.如些反复第一,和第二这两步. 3.让日历中显示当前月份日期(多少天,每天是多少号). 4.让当前月份的日期和星期几对应. 5.让左边两边的日历关联起来. 二.再来说下HTML结构. 1.上面蓝色的是一个DIV,显示当前月分,和上月,下月. 2.下面的日期和星期,是用一个table结构存放数据.星期用thead,日期用:tbody存放. 三.功能展开分析: 3.1.前两个功能? 让我想

  • php+mysql+jquery实现日历签到功能

    php+mysql+jquery实现日历签到功能

    在网站开发过程中我们会经常用到签到功能来奖励用户积分,或者做一些其他活动.这次项目开发过程中做了日历签到,因为没有经验所有走了很多弯路,再次记录过程和步骤. 1.日历签到样式: 2.本次签到只记录本月签到数,想要查询可以写其他页面,查询所有签到记录.(功能有,非常麻烦,古没有做.) 3.前台代码 <include file="Public:menu" /> <style type="text/css"> *{margin:0;padding:

  • jQuery简单实现日历的方法

    本文实例讲述了jQuery简单实现日历的方法.分享给大家供大家参考.具体分析如下: 原理挺简单的,首先算出一个月有多少天,再算出这个月的第一天是星期几,接着顺序排下来就可以了. <!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=d

  • jQuery写的日历(包括日历的样式及功能)

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • jQuery EasyUI API 中文文档 - Calendar日历使用

    jQuery EasyUI API 中文文档 - Calendar日历使用

    用 $.fn.calendar.defaults 重写了 defaults. 用法 复制代码 代码如下: <div id="cc" style="width:180px;height:180px;"></div> 复制代码 代码如下: $('#cc').calendar({ width:600, height:600, current:new Date() }); 特性 名称 类型 说明 默认值 width number 日历组件的宽度. 1

  • JQuery日历插件My97DatePicker日期范围限制

    JQuery日历插件My97DatePicker日期范围限制

    本文实例向大家介绍了JQuery日历插件My97DatePicker日期范围限制的方法,分享给大家供大家参考,具体内容如下 ```<input class="Wdate" id="d1" onclick="WdatePicker()" /> 下面重点说明日期范围限制: 1)静态限制 你可以给通过配置minDate(最小日期),maxDate(最大日期)为静态日期值,来限定日期的范围 示例1.1:限制日期的范围是 2012-12-1到2

  • Jquery日历插件制作简单日历

    Jquery日历插件制作简单日历

    在页面开发中,经常遇到需要用户输入日期的操作.通常的做法是,提供一个文本框(text),让用户输入,然后,编写代码验证输入的数据,检测其是否是日期类型.这样比较麻烦,同时,用户输入日期的操作也不是很方便,影响用户体验.如果使用jQuery UI中的datepicker(日历)插件,这些问题都可以迎刃而解.该插件调用的<span style="color:#cc66cc;"><strong>语法格式</strong></span>如下: $

  • 为开发者准备的10款最好的jQuery日历插件

    为开发者准备的10款最好的jQuery日历插件

    这篇文章介绍的是 10 款最棒而且又很有用的 jQuery 日历插件,允许开发者们把这些漂亮的日历插件结合到自己的网站中.这些日历插件易用性都很强,轻轻松松的就可以把漂亮的日历插件装饰到你的网站了.希望下面的插件列表能给予你一定的帮助,让你的 web开发更快更好.旧版本的日历插件和下拉框已经被淘汰啦,好好欣赏 jQuery 日历插件给你带来的强烈视觉冲击吧! 1. CLNDR.js CLNDR.js 是一个日历插件,用来创建日历,允许用户随意的按照自己的想法去自定义日历.这个插件不会生成任何的标

随机推荐