近来要做一个记事本系统,想找一个合适的日历控件,但网上的都是那种日历选择控件。
于是到qq的记事本系统找了一个,但里面的算法有点落后,所以用了它的样式自己写了个。
前台效果预览
完整实例下载
程序说明
【Date】
这个日历控件运用了很多Date相关操作和方法。
先说说Date对象几个有用的属性:
getFullYear:返回年份值
getMonth:返回月份值
getDate:返回一个月中的日期值
getDay:返回一周中的日期值
其中对getDay可能比较陌生,下面列出值对应的星期:
值 星期
0 星期天
1 星期一
2 星期二
3 星期三
4 星期四
5 星期五
6 星期六
这几个属性都是根据本地时间获取的,还有getUTCFullYear、getUTCMonth、getUTCDate、getUTCDay这几个属性是全球标准时间对应的值。
下面说说获取日期对象,获取当前日期很简单:
new Date()
获取指定日期:
new Date(this.options.SelectDay)
获取指定年月日的日期:
new Date(this.Year, this.Month - 1, d)
下面是几个比较有技巧的地方:
首先,做日历控件时需要知道该月第一天离星期天的天数,参照getDay对应值,发现这刚好等于该月第一天的getDay值,所以可以这样获得:
new Date(this.Year, this.Month - 1, 1).getDay()
还有是获取该月的天数,这里比较精妙,通过获取该月最后一天的getDate值就可以得到该月的天数,但没有办法直接获取该月最后一天。
这里有一个方法,当获取指定年月日的日期时,设置日参数为0,就可以获取上一个月的最后一天,所以可以这样获取:
new Date(this.Year, this.Month, 0).getDate()
这个方法是很久以前在别人代码中发现的。
使用说明:
首先是实例化一个Calendar,并设置参数。
参数说明:
Year:要显示的年份
Month:要显示的月份
SelectDay:选择日期
onSelectDay:在选择日期触发
onToday:在当天日期触发
onFinish:日历画完后触发
一般SelectDay设置成选择了的日期,并在onSelectDay中设置一个函数用来设置这个日期的样式,
例如实例里SelectDay设置成今个月10号并在那天样式设为onSelect:
SelectDay: new Date().setDate(10),
onSelectDay: function(o){ o.className = "onSelect"; },
而onToday就用来设置今日日期的样式,
例如实例里面把今天的日期的样式设为onToday:
onToday: function(o){ o.className = "onToday"; },
在onFinish中可以放需要设置日历的程序。
可以通过this.Year和this.Month获取当前日历显示的年份和月份。
对有数据的日期的也在这里设置,例如实例中是有一个当前月份的有数据的日期列表,然后根据这个列表对相应的日期进行设置:
var flag = [10,15,20];
for(var i = 0, len = flag.length; i < len; i++){
this.Days[flag[i]].innerHTML = "<a href='javascript:void(0);' onclick=\"alert('日期是:"+this.Year+"/"+this.Month+"/"+flag[i]+"');return false;\">" + flag[i] + "</a>";
}
实例中是固定了这个日期列表,实际应用中可以根据年份月份获取对应的日期列表,
个人推荐用年份月份通过ajax获取。
程序还有下面这几个方法:
NowMonth:显示当前月
PreMonth:显示上一月
NextMonth:显示下一月
PreYear:显示上一年
NextYear:显示下一年
PreDraw:根据日期参数画日历
分享到:
相关推荐
近来要做一个记事本系统,想找一个合适的日历控件,但网上的都是那种日历选择控件。于是到qq的记事本系统找了一个,但里面的算法有点落后,所以用了它的样式自己写了个。
6种JavaScript日历控件,任君选择
javascript写的日历控件
Tigra Calendar 是一个跨浏览器的 JavaScript 日历控件,以下拉弹出方式选择日期。
基于javascript脚本的网页日历控件,格式为2013-01-01
JavaScript日历 6中样式 包括当前时间
两款JavaScript日历控件 网页日历控件 可以通过配置更改皮肤颜色 和其他选项
里面包含了培训时,老师讲的PPT,还有JavaScript手册和日历控件,都是一些初学者必学的教材,很实用。
7种漂亮的javascript日历控件,界面优美,使用方便
简单的Date.js控件,在jsp中可以使用,选择时间日历控件(生日选择控件)。
web javascript .net java 时间日历控件 样式
javascript带时分秒日历控件 javascript带时分秒日历控件
用JavaScript写的日历控件,以后我们直接可以在文本框中调用,而不用自己写,最重要的是有时我们写的日期格式,会和数据库中定义的格式不相符。
用javascript 实现的一个很漂亮效果日历控件
JS 日历组件(功能很强) javascript 日历控件 日历选择空间 日期选择 强烈推荐
多风格多语言的JavaScript日历控件
用javascript创建日历控件 可以在html 、asp.net中应用
使用css和javascript技术实现日历控件,可以更好的对日历的日期进行控制