天天看点

javascript日历插件

javascript日历插件

      最近在尝试着写javascript日历插件,所以也到github上看国外人日历源码,或者国内人写的好点的,也在研究点,虽然看到网上有一大把的日历控件,但是没有几个是自己想要的,虽然效果是实现了,但是看他们的源码,头有点大,所以自己也在研究这方面的东西。周末用了2天来研究别人写的代码 自己也试着做做demo,今天正好基本功能完成了,所以趁着这个机会分享下:我们可以先来看看效果:JSFiddler地址如下:

<a href="http://jsfiddle.net/longen/6APH2/1/embedded/result/" target="_blank">demo链接请点击我</a>

基本的配置如下:

   targetCls

'',    输入框dom节点 默认为空 必填项

 beginyear

1978,     开始年份

 endyear

 2050,    结束年份

 date

 new Date(),  默认日期

 type

 "yyyy-mm-dd" ,      日期格式(目前只支持这一种)

separator

 '-' ,             日期链接符

wday

 0 ,             周的第一天

language

{

year:"年",

month:"月",

monthList:["1","2","3","4","5","6","7","8","9","10","11","12"],

weekList:["日","一","二","三","四","五","六"]} // 默认为中文

方法如下:

 1. show():  显示日历面板。

 2. hide(): 隐藏日历面板。

 3. clear() 清除输入框的日期。

 4. getValue() 获取当前选中的日期。

 5. 提供callback回调。返回一个参数(每当点击一项时候 返回输入框的值 即:日历的值)。

所有的JS代码如下:

代码没有什么好解释的 相应的有注释,可以看看源码 不难的。

HTML代码可以这样写:

初始化代码如下:

<a href="http://files.cnblogs.com/tugenhua0707/%E6%97%A5%E5%8E%86%E6%8E%A7%E4%BB%B6.rar">日历控件demo下载</a>

继续阅读