近来要做一个记事本系统,想找一个合适的日历控件,但网上的都是那种日历选择控件。
于是到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:根据日期参数画日历
分享到:
相关推荐
JavaScript博客式日历控件是一种用户界面元素,常用于在线记事本系统或者任何需要日期选择功能的应用。这种日历控件与常见的日历选择器不同,它通常呈现出一种更美观、更符合博客或网站风格的设计。在创建自定义日历...
JavaScript日历控件是网页开发中常用的一种交互元素,它能帮助用户方便地选择日期,常见于表单输入、事件安排或时间相关的功能。在给定的资源中,包含了六种不同样式的JavaScript日历,这些日历可能具有不同的设计...
7. **兼容性**:考虑到浏览器的多样性,编写JavaScript日历控件时需要关注跨浏览器的兼容性问题,确保在不同的浏览器(如Chrome、Firefox、Safari、Edge和IE)上都能正常工作。 在提供的文件名中,"calendar.html"...
Tigra Calendar是一款广泛使用的跨浏览器JavaScript日历控件,它以其弹出式的显示方式而受到青睐。在本文中,我们将深入探讨这款控件的特点、功能以及如何在实际项目中应用。 首先,Tigra Calendar的主要特点是其跨...
JavaScript日历控件是网页开发中常用的一种交互元素,它为用户提供了一个直观的方式来选择日期,常见于表单、事件管理或在线预订系统等场景。在本文中,我们将深入探讨六种不同的JavaScript日历控件,了解它们的特点...