简单JavaScript日历及详细说明

效果图:

测试代码:

calendar2

#calendar{
background:#000;
color:#FFF;
font-size:0.8em;
}
#tittle{
font-size:1.4em;
padding:4px 0.55em;
}
#days th {
font-weight:bold;
text-align:center;
padding:4px 0.55em;
}
#calendar td{
text-align:center;
padding:4px 0.55em;
}
#today{
color:#F00;
font-weight:bold;
}

var calendar = {
dayTable:null, //初始化TABLE
year:null, //初始化年
month:null, //初始化月份

getFirstDay:function(year,month){ //获取每个月第一天再星期几
var firstDay = new Date(year,month,1);
return firstDay.getDay(); //getDay()方法来获取
},
getMonthLen:function(year,month){ //获取当月总共有多少天
var nextMonth = new Date(year,month+1,1); //获取下个月的第一天
nextMonth.setHours(nextMonth.getHours() - 3); //由于获取的天是0时,所以减去3小时则可以得出该月的天数
return nextMonth.getDate(); //返回当天日期
},
createCalendar:function(form,date){ //创建日历方法
calendar.year = date.getFullYear(); //获得当时的年份,并赋值到calendar属性year中,以便别的方法的调用
calendar.month = date.getMonth(); //跟上面获取年份的目的一样
form.getElementsByTagName('th')[1].innerHTML = calendar.year + '年 ' + (calendar.month + 1) + '月'; //插入年份和月份
calendar.clearCalendar(form); //清空TABLE
var monthLen = calendar.getMonthLen(calendar.year,calendar.month); //获取月份长度
var firstDay = calendar.getFirstDay(calendar.year,calendar.month); //获取月份首天为星期几
for(var i = 1;i

  >>
             
             
             
             
             
             

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

[程序说明]主要为calendar类,里面的方法说明有:
getFirstDay:获取每个月第一天再星期几
getMonthLen:获取当月总共有多少天
createCalendar:创建日历方法
clearCalendar:清空TABLE方法
init:运行方法

[方法介绍]
getFirstDay中主要用了new Date()的getDay()方法,该方法是用于获取日期所在星期几.
但有一个特别需要注意的地方,就是getDay()方法所获取的星期数如下:
星期日为0,星期一为1,星期二为2,星期三为3,星期四为4,星期五为5,星期六为6

getMonthLen方法用于获取当月的天数,也就是目标为获取当月最后一天的日期即可.
所以思维是获取下个月第一天的0时,然后减去3个小时就可以得到当月天数.
nextMonth.setHours(nextMonth.getHours() - 3);
减去3小时的原因参考<<DHTML Cookbook>>是这样说的:三个小时的修正用于处理在月份中包含了夏季时间到冬季时间的转换时发生的日期计算的异常现象.
但这解释我也不太理解,所以就直接按照巨人的做法做了,若果有人知道该异常现象是怎么回事,可以告诉我.
而该方法主要用了Date的setHours()和getDate()方法,分别用于获得小时数和天数.

createCalendar创建日历的方法,由于我自身本来写好了HTML代码,所以不直接用DOM来生成,这里主要是写入日期数.
写入日期的主要过程为:
for(var i = 1;i <= monthLen;i++){
calendar.dayTable[i+firstDay-1].innerHTML = i;
}
monthLen为getMonthLen()方法所获取的当月长度,循环过程不应该超过该长度.
firstDay则由getFirstDay()方法获得第一天的星期值,只要i+firstDay就可以得到开始第一天所在日历单元格的位置,但由于数组从0开始,所以另外减去1.
在for循环插入值的过程中并判断今天的日期,并为今天加入一个特别的id="today",代码如下:
if((i+firstDay-2) == new Date().getDate() && calendar.month == new Date().getMonth() && calendar.year == new Date().getFullYear()){
calendar.dayTable[i+firstDay-1].id = 'today';
}

clearCalendar方法则用来每次换月的过程中,清空日历,主要由for循环执行,过程比较简单,所以不多详细介绍.

另外特别说明2个单击事件,都是换月作用,其中为向前一个月和向后一个月:
preMon.onclick = function(){
calendar.createCalendar(form,new Date(calendar.year,calendar.month-1,1));
}
nextMon.onclick = function(){
calendar.createCalendar(form,new Date(calendar.year,calendar.month+1,1));
}
由于把整体的year和month设置为calendar的属性,所以只需在过程中对其月份进行加减即可.
其中由于在onclick事件中,所以this分别指向preMon和nextMon,所以在内部不使用this,直接使用calendar.在createCalendar不使用this也是这个原因.

[使用说明]
HTML和CSS样式可以自行修改,但是整体不做太大改变的情况下.直接待用calendar类,并且使用init方法,把日历HTML的id调入即可,如下:
calendar.init(calendars);

在整个过程中,需要注意的就是getFirstDay()和getMonthLen()方法的思维,只要了解了主要的部分.输入日期的方法可以有很多.
改程序还有许多需要改进的地方,希望大家给点意见.~`尤其是在代码里面,有哪些地方需要注意的,本人写的代码不太多,所以希望各位给与批评,然后我能发现错误进行改正.

时间: 2010-07-25

javascript实现日历控件(年月日关闭按钮)

经常使用google的朋友一定对google绚丽的日历控件记忆犹新吧,那我们也来实现一个,虽然功能和效果比不上,但重要的是实现的过程. 下面是要实现的html结构: <div id="a"><div id="head"><span id="yface">年:<select id="year"></select></span><span id=&quo

修改js Calendar日历控件 兼容IE9/谷歌/火狐

修改Calendar日历控件 兼容IE9,谷歌,火狐. 只是能用,出现的位置有所不同,希望有高手再帮我改改吧,谢谢 一. 复制代码 代码如下: this.iframe = window.frames("meizzCalendarIframe"); 修改为 复制代码 代码如下: this.iframe = window.frames["meizzCalendarIframe"]; 二. 复制代码 代码如下: var a = (arguments.length==0)

js Canvas实现的日历时钟案例分享

Html: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <script src="requestNextAnimationFrame.js"></script> <script src="calendarWithTime.js">&

javascript写的日历类(基于pj)

先看看效果: 复制代码 代码如下: <script type="text/javascript" src="http://users4.Jabry.com/pengju/src/pj-2.1.1.mini.js"></script> <script type="text/javascript" src="http://users4.Jabry.com/pengju/src/Calendar.js"

JavaScript制作简单的日历效果

本文实例为大家分享了 <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title></title> </head> <body> <script> document.write("<table>"); document.write("<th colspan='7'>

javascript实现带节日和农历的日历特效

带节日和农历的脚本: 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <TITLE>带农历的日历</TITLE>          <SCRIPT language="JavaScript"> <!--  var lunarInfo

js css+html实现简单的日历

web页面中很多地方都会用到日历显示,选择等,本文用html.css.javascript实现简单的日历.完成以后的效果与页面左侧的效果差不多,可以切换上个月.下个月.也可以根据实际情况进行扩展. html html部分比较简单,声明一个div,具体的html用javascript生成.整体内容大概是这样的: <!doctype html> <html> <head> <meta charset='utf-8'> <link rel='styleshe

javascript实现的简易的DatePicker日历

jQ的ui有,YUI的widget里也有.而且也封装的结结实实,兼容性,通用性,都做得挺好.于是在代码完善的同时,代码量自然也不会少.即使建立在基础库之上,代码也是好几百行. 真正使用的时候可能并不需要这么完善的功能.咱们就写个简陋点的东西,够自己用就行了. 而且以前有朋友提出我发的东西都是一些娱乐货,没有什么实用性,这次就当是个开始,抛个砖,以后时不时发个带一些实用性的东东. <!-- 以下demo没有什么出彩的地方,仅供有需要的朋友看看 --> DatePicker .date-picke

JS简单实现移动端日历功能示例

本文实例讲述了JS简单实现移动端日历功能.分享给大家供大家参考,具体如下: 只是一个初步的简单的日历,有是否显示上月和下月部分的选项 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale

javascript实现的淘宝旅行通用日历组件用法实例

本文实例讲述了javascript实现的淘宝旅行通用日历组件用法.分享给大家供大家参考. 在线演示:http://demo.jb51.net/js/2015/trip-calendar/demo.html PS:下面的演示代码,需要用到 trip-calendar.js与trip-calendar.css文件.打包下载地址 具体如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8">

JS学习之一个简易的日历控件

这个日历控件类似于园子用的日历,如下图: 这种日历控件实现起来不难,下面简单分析下我的思路: 首先,是该控件的可配置项: 复制代码 代码如下: ... settings: { firstDayOfWeek: 1, baseClass: "calendar", curDayClass: "curDay", prevMonthCellClass: "prevMonth", nextMonthCellClass: "nextMonth&quo

ASP.NET中日历控件和JS版日历控件的使用方法(第5节)

今天小编带大家以做任务的形式了解ASP.NET中日历控件的使用方法,主要任务内容: 1.添加一个日历,设置日期以蓝色的完整名称显示,周末以黄色背景红色文字显示,而当前日期使用绿色背景显示,用户可以选择一天.一周或整个月,被选的天/周/月使用灰色背景色来显示.当选中一个日期后,把时间显示在下面的一个文本框中,效果如图所示: 2.设计一个注册页面,使用js日历控件帮助用户输入出生日期.效果如图所示: 学习项目一  Calendar日历控件 1.在站点下创建一个Calendar页面,并在页面上拖放一个

一起学写js Calender日历控件

最近看了一下关于js日期的一些函数,突然想到了日历控件,于是试着写了一个,作为后台程序员的我水平有限,大家抱着学习的态度看看我写的这个例子吧,一起学习进步! 首先一个常用的日期函数: Date(year,month,day) var   date=new  Date(); 获取年份 var   year=this.date.getFullYear(); 获取月份,这里是月索引所以要+1 var   month=this.date.getMonth()+1; 获取当天是几号 var   day=t

js前端日历控件(悬浮、拖拽、自由变形)

很少发现网上有简洁好用的自定义前端控件的贴子,最近项目中需要,自己YY开始写前端控件,在此给大家分享 控件是基于jQuery.UI的Widget写的,写起来就方便很多,使用起来跟普通jQuery控件一样$(#id).control(option),看着眼熟吧,下面就开始了. 首先说下控件的依赖包,加载控件的时候必须先加载jQuery, jQuqery.UI, 另外jquery-ui.css 这个包也需要引用,此包主要应用了jQuery拖拽和放缩的样式,控件样式方面大家自由发挥,给了个自己写的默认

原生js制作日历控件实例分享

本文实例为大家分享了js实现一个简单的日历控件,供大家参考,具体内容如下 效果图: 具体代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>date</title> <style type="text/css"> *{ margin:0; padding:0;} a{ text-decoration:none

JS 日历控件(蓝色)

超漂亮的JS日历控件 *{ font:12px; letter-spacing:0px; } body{ background-color:#E5E9F2; overflow:hidden; margin:0; border:0px; } #titleYear{ text-align:center; padding-top:3px; width:120px; height:20px; border:solid #E5E9F2; border-width:0px 1px 1px 0px; back

Android学习教程之日历控件使用(7)

本文实例为大家分享了Android日历控件的使用方法,供大家参考,具体内容如下 MainActivity.java代码: package siso.timessquare; import android.content.Intent; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.Button; p

纯javascript版日历控件

平时只有下班时间能code,闲来写了个纯javascript版.引用该calendar.js文件,然后给要设置成日历控件的input的id设置成calendar,该input就会变成日历控件. <!doctype html> <html> <head> <meta charset="utf-8"> <title>日历控件</title> <script src="js/calendar.js&quo

支持IE,Firefox的javascript 日历控件

效果图:其实学习的方法,就是会搜索的方法,会搜索才能更快的解决问题.搜索方法: javascript 日历控件 site:jb51.net| 日期输入框演示-jb51.net script body{font-size:12px;font-family:Verdana,Arial,"宋体";} a:link {color:#464646;text-decoration:none;} a:visited {color:#464646;text-decoration:none;}ifram