jQuery插件 - 下拉列表日期选择控件
日期选择在开发中的应用应该是再常见不过的了~
以前大多数的日期选择基本上以这种形式体现：

图1:


图2:



但是，在我们经过很多次的使用和用户反馈中得之，这种方式操作不够方便，虽然看起来很直观，但如果是选2009，以“图1”哪种方式就很难操作，需要用户点击好多次才可以选到。图2的还要好些，不过感觉上还是不怎么好。

于是，有些网站就出现了以这种形式出现的日期选择控件：


另外有一点比较重要的！图一图二的哪种方式，无法用键盘操作，比如我在填写表单的时候经常会直接去输入 2005 12 25 这种类似的，如果通过下拉列表来分别选择年、月、日，这种感觉就会好多了，也支持用键盘快速输入。

如何很方便的实现这种功能呢？如果按普通的方式放三个下拉列表框来实现的话，将会写很多复杂的代码。
于是我自已做了一个很简单的jQuery插件，实现这种下拉列表的日期选择功能。
使用的时候你只用调用一个js就可以将指定的文本框转换成这种形式的日期选择，但提交的时候依然还是读取哪个文本框。
如以下代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jQuery插件之下拉列表日期控件 - jQuery.jSelectDate</title>
        <script type="text/javascript" src="scripts/jquery.js"></script>
        <script type="text/javascript" src="scripts/jquery.jSelectDate.js"></script>
        <script type="text/javascript">
            
            $("body").ready(function(){
                
                //应用方法
                $("input.date").jSelectDate({
                    css:"date",
                    yearBeign: 1995,
                    disabled : false
                });

            })
            
            $(this).jSelectDate

        </script>        
    </head>
    <body>
        <input type="text" id="txtName" class="date" value="2005-3-22" /> <button onclick="alert($('#txtName').val());">当前值</button>
        <br /><br />
        <input type="text" id="txtDate2" class="date" value="1995-5-2" />
    </body>
</html>

更新记录
Version 0.2 - 2008-1-24
1.加入了闰年、大小月和二月天数的处理
2.新增一个Span标签的外框，以便于设置样式
3.新增可设置是否在下拉列表后面加入“年、月、日”几个字


Version 0.1 - 2008-1-14
1.基本的功能实现


截图


演示
转换前： 转换后：


下载


posted on 2008-01-24 12:42 李华顺 阅读(9171) 评论(32)  编辑 收藏 所属分类: Javascript & Ajax 、Works

  回复  引用  查看    
2008-01-16 13:04 | carysun      
看看
  回复  引用  查看    
2008-01-16 13:07 | Awen      
@ndf2dfa
怎么现在有心眼的越来越多了，呵呵，华顺不要在意啊
  回复  引用  查看    
2008-01-16 13:23 | 李华顺      
@Awen
谢谢支持
我倒是没什么，讨厌的评论X就可以了
  回复  引用    
2008-01-16 13:57 | 帝之晓11 [未注册用户]
没有验证功能吧，我用2008-13-35 也可以，呵呵
  回复  引用    
2008-01-16 14:02 | （武眉博<活靶子Net> ） [未注册用户]
好像没有处理闰年的2月和大小月 28，29，30，31号
  回复  引用    
2008-01-16 14:04 | （武眉博<活靶子Net> ） [未注册用户]
如果能月下拉框的change时处理一下 本月最大日期 就完美了
  回复  引用  查看    
2008-01-16 14:46 | 蓝天旭日      
支持！
  回复  引用  查看    
2008-01-16 15:14 | 李华星      
把效果贴出来看看
  回复  引用  查看    
2008-01-16 15:14 | 兴百放      
在图2 的基础上把选择年改成下列列表框，把月也改成下拉列表框，虽然在日上还要选择，但是比下拉列表框要直观，友好，也不用在从30天内选择一天了
  回复  引用  查看    
2008-01-16 15:51 | 李华顺      
@兴百放
看上面的红色字，这个说漏了

@李华星
上面有演示呀！
  回复  引用    
2008-01-16 17:00 | 文艳将 [未注册用户]
我是新学.NET的
不会呀
怎么用
  回复  引用  查看    
2008-01-16 17:09 | 李华顺      
@文艳将
跟.NET没关啦，这是Javascript的 jQuery框架的插件
http://www.jquery.com
去这个网站看看
  回复  引用  查看    
2008-01-16 22:31 | 任佶      
非常喜欢你的博客版面
  回复  引用    
2008-01-16 23:21 | uuuuu [未注册用户]
888
  回复  引用  查看    
2008-01-22 00:33 | 阿瑞--16hi      
要是能验证闰年 日期那就完美了~~ 加油 支持你！！！！！！
  回复  引用  查看    
2008-01-24 12:25 | 沛沛      
要是能验证闰年 日期那就完美了~~ 加油 支持你！！！！！！


  回复  引用  查看    
2008-01-24 14:22 | 李华顺      
@沛沛
@阿瑞--16hi
验证闰年 大小月 等已修正
  回复  引用  查看    
2008-01-24 14:58 | 没剑      
分享一下~~~
另
楼主，你的哪个下拉框样式公布一下吧？呵呵，偶从社区追到你博客里来要了哦~
  回复  引用  查看    
2008-01-24 15:13 | 李华顺      
@没剑
没有样式呀,就:
select {
border-top:1px solid #333;
border-left:1px solid #333;
border-right:1px solid #999;
border-bottom:1px solid #999;
padding:2px;
}

只有在 Firefox 下面才能看到
  回复  引用    
2008-01-24 15:19 | cozo [未注册用户]
请教个问题，年份的起止数字能否自己设定？还有，能否只显示年和月，不显示日呢？
  回复  引用  查看    
2008-01-24 15:33 | 留恋星空      
支持
  回复  引用  查看    
2008-01-24 15:34 | 李华顺      
yearBeign 开始年
yearEnd

目前无法只显示年和月
  回复  引用  查看    
2008-01-24 18:03 | 碧海蓝天      
select 样式真是漂亮
楼主公布一下吧
嘿嘿
  回复  引用  查看    
2008-01-24 20:21 | 没剑      
@李华顺
我是指你的哪个下拉箭头样式啊~~据一下美工朋友说无法修改这一个，你的哪个怎么样做的？
  回复  引用    
2008-01-24 21:03 | 培根 [未注册用户]
好久没有来了,上面写的东西一般真的还没有注意。学习过...
  回复  引用  查看    
2008-01-25 14:18 | 碧海蓝天      
--引用--------------------------------------------------
没剑: @李华顺
我是指你的哪个下拉箭头样式啊~~据一下美工朋友说无法修改这一个，你的哪个怎么样做的？
--------------------------------------------------------
我也是想知道那个下拉箭头的样式是怎么弄的？难道是自定义控件不成？
  回复  引用  查看    
2008-01-25 18:32 | 李华顺      
@没剑
@碧海蓝天
哈哈哈，哪个是Window主题，默认哪个绿色的
  回复  引用  查看    
2008-01-25 19:07 | Jason Cui      
为什么我使用的时候生成的不是select，而是span？一堆日期列在下面。
需要搭配什么版本的jquery？
  回复  引用  查看    
2008-01-25 20:44 | 碧海蓝天      
@李华顺
嘎嘎
原来是这样呀
  回复  引用  查看    
2008-03-13 11:12 | yunxizfj      
多多向你学习啊
  回复  引用    
2008-07-04 20:01 | qiums [未注册用户]
实际应用中，刚打开页面时，默认的1月没有31日。必须选择到另一个月再选回来，才会出现31日哟。
  回复  引用  查看    
2008-07-04 20:49 | 李华顺      
@qiums
这个Bug已经修正了的，见：
http://code.google.com/p/jselectdate/

因为现在已经将博客转到http://huacn.blogbus.com 里面去了，所以没有再更新此处。

标题  
姓名  
主页
Email (博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
网站首页

新闻频道

社区

小组

博问

网摘

闪存

找找看
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
该文被作者在 2008-01-24 14:44 编辑过


相关链接:

最新IT新闻:
Google向Wine贡献更多代码
苹果创始人Steve Wozniak称iPod将被淘汰
福布斯：硅谷日子将更难过 谁下一个倒下
微软老矣 尚能赚否？
YouTube探索新赢利模式 开始售音乐、视频游戏