为了忘却的纪念 $bestmost->save("多多益善")
言己及众
PHP博客
|
首页
|
发新随笔
|
发新文章
|
联系
|
聚合
|
管理
(转)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.基本的功能实现
截图
演示
转换前:
转换后:
下载
源文件(9Kb):
http://files.cnblogs.com/huacn/jquery.jSelectDate-0.2.js
演示文件(36Kb):
http://files.cnblogs.com/huacn/jSelectDate_src_0.2.zip
发表于 2008-12-18 20:23
bestmost
阅读(1077)
评论(0)
编辑
收藏
引用
网摘
所属分类:
js
只有注册用户
登录
后才能发表评论。
网站导航:
IT新闻
博客园
BlogJava
博客生活
IT博客网
C++博客
程序员招聘
随笔:279 文章:16 评论:48 引用:0
<
2008年12月
>
日
一
二
三
四
五
六
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
公告
留言簿
(7)
给我留言
查看公开留言
查看私人留言
随笔分类
(325)
ajax(8)
(rss)
appche(2)
(rss)
fleaphp(19)
(rss)
hacker(4)
(rss)
html,web相关(34)
(rss)
js(85)
(rss)
linux(2)
(rss)
mysql 及其他(22)
(rss)
php模块和类库(100)
(rss)
seo搜索(13)
(rss)
smarty(7)
(rss)
svn(7)
(rss)
xajax(1)
(rss)
工作心得(19)
(rss)
软件工程(2)
(rss)
all
codebit有效并且可重用的小段代码
如果你是寻找一些小的编程技巧和经典的教程文章,那么您找对地方了,你可以从点击导航里的 【技术文章】 开始。通过重用本站收集的小段代码,您的编程效率有很大提高,偶尔也会自己写一些本站所没有的经典代码
pear安装 php(Appserv)
PEAR套件的管理(图)
Phpgrid php框架
php相关
PHP中相对路径问题
泉城酷仔的博客php
搜索
积分与排名
积分 - 327975
排名 - 3
最新评论
1. re: js中用undefined作判断条件
评论内容较长,点击标题查看
--haix
阅读排行榜
1. 字符编码详解及由来(UNICODE,UTF-8,GBK)[转帖](12381)
2. 根据16进制输出所有汉字(9048)
千百亿工作室
BT促销网