JavaScript 日期联动选择器

======================================================
注：本文源代码点此下载
======================================================

javascript 日期联动选择器

一个日期联动选择器,年月日联动显示,准确显示日期(包括闰年日期),可自定义日期范围。

效果预览:

年 月 日

你选择的日期:

程序说明

【select】

先说清空一个select,最简单的方法是把options的length设为0就可以了:

oselect.options.length = 0;

给select添加option,有多个方法,如果用dom的标准方法是:

var op = document.createelement("option"); op.value = i; op.innerhtml = i; oselect.appendchild(op);

对于option有更方便的方法:

oselect.options.add(new option(i, i));

其中new option的第一个参数是显示的文本值,第二个是value值。

利用options.add的第二个可选参数可以把options插入到指定的索引位置,还有一个remove方法可以移除指定索引的options。

要注意的是options下标从0开始。

不过我这里用了一个看来比较笨的方法:

code

oselect.options.length = ilength;

for (var i = 0; iilength; i++) { oselect.options[i].text = oselect.options[i].value = istart + i; }

别看这么笨,却是最有效率的,而且不用每次都清空select,下面可以测试一下:

下面是完整测试代码:

code

select id="testsel">/select>

div id="testshow">/div>

input name="" type="button" value="效率测试" id="testbtn" />

script>

document.getelementbyid("testbtn").onclick = function(){

var testsel = document.getelementbyid("testsel"), testshow = document.getelementbyid("testshow"), imin = 0, imax = 1000, dt;

testshow.innerhtml = "";

dt = new date().gettime();

var len = imax - imin + 1; testsel.options.length = len;

for (var i = 0; ilen; i++) { testsel.options[i].text = testsel.options[i].value = imin + i; }

testshow.innerhtml += "笨方法:" + (new date().gettime() - dt) + " 毫秒;";

dt = new date().gettime();

testsel.options.length = 0;

for (var i = imin; iimax; i++) { testsel.options.add(new option(i, i)); }

testshow.innerhtml += "new option方法:" + (new date().gettime() - dt) + " 毫秒;";

dt = new date().gettime();

testsel.options.length = 0;

for (var i = imin; iimax; i++) { var op = document.createelement("option"); op.value = i; op.innerhtml = i; testsel.appendchild(op); }

testshow.innerhtml += "dom方法:" + (new date().gettime() - dt) + " 毫秒;";

}

/script>

还有一个更快的方法,就是使用outerhtml,但这个会对select本身操作而且不兼容就不推荐了。

最后就是设置默认项,一般的方法是设置selectedindex属性:

oselect.selectedindex = iindex;

但要注意的是在ie6如果用dom方法创建option,然后立即设置selectedindex会无效。

可以测试一下(在ie6测试):

测试代码:

code

select id="idselected">select>

input name="" type="button" value="默认项测试" id="testbtnselected" />

script>

document.getelementbyid("testbtnselected").onclick = function(){

var oselect = document.getelementbyid("idselected");

oselect.options.length = 0;

for (var i = 0; i10; i++) {

var op = document.createelement("option"); op.value = op.innerhtml = i; oselect.appendchild(op);

}

oselect.selectedindex = 5;

}

script>

除了换另外两个方法创建select,还有三个方法解决,首先可以在添加option的同时设置:

if(i == 4){ op.selected = true; }

还可以用settimeout延迟一下:

settimeout(function(){ oselect.selectedindex = iindex; }, 0);

最后是比较推荐的用setattribute来设置:

oselect.options[iindex].setattribute("selected", "true");

注意这个方法如果结合笨方法使用的话在ff中会设置失败。

这样关于select的相关操作就介绍完了。

日期相关的操作请参考blog式日历控件

使用说明:

首先是实例化一个dateselector,其中三个参数分别是年月日的select对象。

可选参数:

year:0,//年

month:0,//月

day:0,//日

minyear: 0,//最小年份

maxyear: 0,//最大年份

onchange: function(){}//日期改变时执行

程序代码:

code

var $ = function (id) {

return "string" == typeof id ? document.getelementbyid(id) : id;

};

function addeventhandler(otarget, seventtype, fnhandler) {

if (otarget.addeventlistener) {

otarget.addeventlistener(seventtype, fnhandler, false);

} else if (otarget.attachevent) {

otarget.attachevent("on" + seventtype, fnhandler);

} else {

otarget["on" + seventtype] = fnhandler;

}

};

var class = {

create: function() {

return function() {

this.initialize.apply(this, arguments);

}

}

}

var extend = function(destination, source) {

for (var property in source) {

destination[property] = source[property];

}

return destination;

}

var dateselector = class.create();

dateselector.prototype = {

initialize: function(oyear, omonth, oday, options) {

this.selyear = $(oyear);//年选择对象

this.selmonth = $(omonth);//月选择对象

this.selday = $(oday);//日选择对象

this.setoptions(options);

var dt = new date(), imonth = parseint(this.options.month), iday = parseint(this.options.day), iminyear = parseint(this.options.minyear), imaxyear = parseint(this.options.maxyear);

this.year = parseint(this.options.year) || dt.getfullyear();

this.month = 1imonth && imonth12 ? imonth : dt.getmonth() + 1;

this.day = iday > 0 ? iday : dt.getdate();

this.minyear = iminyear && iminyearthis.year ? iminyear : this.year;

this.maxyear = imaxyear && imaxyear > this.year ? imaxyear : this.year;

this.onchange = this.options.onchange;

//年设置

this.setselect(this.selyear, this.minyear, this.maxyear - this.minyear + 1, this.year - this.minyear);

//月设置

this.setselect(this.selmonth, 1, 12, this.month - 1);

//日设置

this.setday();

var othis = this;

//日期改变事件

addeventhandler(this.selyear, "change", function(){

othis.year = othis.selyear.value; othis.setday(); othis.onchange();

});

addeventhandler(this.selmonth, "change", function(){

othis.month = othis.selmonth.value; othis.setday(); othis.onchange();

});

addeventhandler(this.selday, "change", function(){

othis.day = othis.selday.value; othis.onchange();

});

},

//设置默认属性

setoptions: function(options) {

this.options = {//默认值

year:0,//年

month:0,//月

day:0,//日

minyear:0,//最小年份

maxyear:0,//最大年份

onchange:function(){}//日期改变时执行

};

extend(this.options, options || {});

},

//日设置

setday: function() {

//取得月份天数

var daysinmonth = new date(this.year, this.month, 0).getdate();

if (this.day > daysinmonth) { this.day = daysinmonth; };

this.setselect(this.selday, 1, daysinmonth, this.day - 1);

},

//select设置

setselect: function(oselect, istart, ilength, iindex) {

//添加option

oselect.options.length = ilength;

for (var i = 0; iilength; i++) { oselect.options[i].text = oselect.options[i].value = istart + i; }

//设置选中项

oselect.selectedindex = iindex;

}

};

完整实例下载

转载请注明出处:http://www.cnblogs.com/cloudgamer/

如有任何建议或疑问,欢迎留言讨论。

如果觉得文章不错的话,欢迎点一下右下角的推荐。

程序中包含的js工具库cjl.0.1.min.js,原文在这里。

标签: javascript, 联动, date, select, 日期选择

绿色通道:好文要顶关注我收藏该文与我联系

posted @ 2008-10-28 10:30 cloudgamer 阅读(21229) 评论(67)编辑 收藏

发表评论

1913708

回复 引用

#1楼 2008-07-06 20:11 地方[未注册用户]

大兄弟 为什么 你这博客能演示代码?

回复 引用 查看

#2楼[楼主] 2008-07-06 21:50 cloudgamer

发文章时选择html模式就能直接输代码了

回复 引用

#3楼 2008-07-06 22:50 地方[未注册用户]

你这是用的哪得博客

回复 引用

#4楼 2008-07-06 22:52 地方[未注册用户]

还有 我也想学下 你这种代码格式 好像是prototype的格式阿 你能不能开篇文章讲讲啊?或者把你msn告诉我 有时间我请教你。。。

回复 引用 查看

#5楼[楼主] 2008-07-07 00:30 cloudgamer

@地方

就是这里的博客啊

至于代码格式你可以找prototype.js代码说明来看看

里面有说明

回复 引用

#6楼 2008-10-21 10:54 潘凯[未注册用户]

不错,技巧不错!!

回复 引用

#7楼 2008-10-21 15:24 潘凯[未注册用户]

在ie上有个bug,就是选择当选择年或者月份的时候,日期会被默认选择到该月第一日,很奇怪

回复 引用 查看

#8楼[楼主] 2008-10-21 16:15 cloudgamer

@潘凯

谢谢支持

改成

settimeout(function(){ oselect.selectedindex = iindex; }, 0);

就好了

回复 引用

#9楼 2008-10-21 16:55 潘凯[未注册用户]

但是为什么呢?在firefox上很正常啊,就ie6不对

ie6内部是怎么解释那段代码的哦,难道异步执行?

回复 引用

#10楼 2008-10-21 16:59 潘凯[未注册用户]

对了楼主,我想把new dateselector("idyear", "idmonth", "idday");

这句话加在window.οnlοad=function(){

new dateselector("idyear", "idmonth", "idday");

}里面,结果ie6下显示不正常,好奇怪哦

你看看

支持楼主!!!

回复 引用 查看

#11楼[楼主] 2008-10-21 23:26 cloudgamer

@潘凯

这个一般是dom渲染问题

用settimeout延迟一下就行

下面的也是差不多的问题

我一般是在样式设置宽度解决的

回复 引用

#12楼 2008-10-22 09:14 潘凯[未注册用户]

dom渲染,对我又是个新名词了,我自己去研究研究,谢谢!

回复 引用

#13楼 2008-10-22 14:35 @粉丝[未注册用户]

兄弟,你说日刷新是因为dom渲染问题

用settimeout(function(){oselect.selectedindex = iindex;},0);可避免

但我不是很明白 时间为0 延时了???

渲染:你的意思是加载速度的关系么?

回复 引用 查看

#14楼[楼主] 2008-10-22 19:43 cloudgamer

@@粉丝

应该是这个意思

至于0延时

虽然是0但其实是需要处理完上一个操作才能进行的

因为js是单线程的同一时间只能完成一个操作所以虽然是0但还是有时间延迟的

回复 引用

#15楼 2008-10-30 10:19 剑无名[未注册用户]

大哥,你这里的js代码都好精彩啊,看得我好兴奋!能不能留个qq或者msn或者建个群之类的大家多交流,有什么不懂的能指点一二啊!

回复 引用 查看

#16楼[楼主] 2008-10-30 20:09 cloudgamer

@剑无名

有什么问题欢迎留言

回复 引用 查看

#17楼 2008-11-17 10:28 王祥 @ dot net 驿站

拜读了!

回复 引用 查看

#18楼 2008-11-17 10:44 王祥 @ dot net 驿站

谷歌浏览器里运行你那个效率测试,如下

笨方法:270 毫秒;new option方法:193 毫秒;dom方法:117 毫秒;

回复 引用 查看

#19楼[楼主] 2008-11-17 11:23 cloudgamer

@王祥 @ dot net 驿站

确实是

我估计是谷歌浏览器没有对这个操作优化导致的

大量的创建应该比修改耗时才对

回复 引用

#20楼 2008-11-20 12:49 sdf[未注册用户]

不错哦,挺精彩的

回复 引用

#21楼 2008-11-20 12:50 sdf[未注册用户]

能告诉我你的qq吗,我想跟你学习学习

回复 引用

#22楼 2008-11-20 12:52 sdf[未注册用户]

你好,你有像qq截图那样的javascript代码吗

能不能发一份给我

songqihong@yeah.net

谢了!

回复 引用 查看

#23楼[楼主] 2008-11-20 13:53 cloudgamer

@sdf

很少上q

欢迎留言或email

不知你要的是不是这样的截图

http://www.cnblogs.com/cloudgamer/archive/2008/07/21/1247267.html

回复 引用

#24楼 2008-11-24 09:48 bolm[未注册用户]

很棒,支持!

回复 引用 查看

#25楼 2008-11-25 17:18 赵晓雷

兄弟,javascript很厉害呀,跟你好好学习!

回复 引用

#26楼 2008-12-01 17:00 tcxf[未注册用户]

我只想问问,为什么这些javascript代码和我平时看的大不相同呢?

回复 引用

#27楼 2008-12-01 17:01 tcxf[未注册用户]

在哪里学习这种风格的javascript代码?拜托大兄弟。

回复 引用

#28楼 2008-12-01 17:02 tcxf[未注册用户]

持续关注~

回复 引用 查看

#29楼[楼主] 2008-12-02 08:22 cloudgamer

@tcxf

这是prototype结构吧

你可以下一个prototype.js来看看

回复 引用

#30楼 2008-12-03 15:27 tcxf[未注册用户]

大兄弟,有相关prototype.js的详细资料吗,没找到类似的。。拜托了哦。。如果方便的话请发我信箱。

回复 引用 查看

#31楼[楼主] 2008-12-03 16:51 cloudgamer

@tcxf

已经发了

回复 引用

#32楼 2009-02-27 10:32 lan[未注册用户]

现在是显示当前的时间,如何设置默认的时间呢?

回复 引用 查看

#33楼[楼主] 2009-02-27 10:34 cloudgamer

@lan

year:0,//年

month:0,//月

day:0,//日

你在初始化时设置这3个属性

回复 引用

#34楼 2009-02-27 11:01 lan[未注册用户]

能否给个例子?比如说,在数据库里的时间是2009/02/27

后天,我修改资料的时候,我要这个时间显示的是2009/02/27,而不是2009/03/01

回复 引用 查看

#35楼[楼主] 2009-02-27 11:12 cloudgamer

@lan

例如

new dateselector("idyear", "idmonth", "idday", { year: 2008, month:10, day:10 });

这样就会默认显示

2008/10/10

回复 引用

#36楼 2009-03-19 13:43 浪峰

看不到!

回复 引用

#37楼 2009-03-19 13:44 浪峰

看到了

回复 引用

#38楼 2009-05-20 18:16 zkj[未注册用户]

测试效率:

ff(3.0.10)

笨方法:243 毫秒;new option方法:444 毫秒;dom方法:384 毫秒;

ie(8)

笨方法:313 毫秒;new option方法:875 毫秒;dom方法:1187 毫秒;

谷歌浏览器(2.0.180.0)

笨方法:107 毫秒;new option方法:127 毫秒;dom方法:72 毫秒;

可见:谷歌浏览器确实对dom操作是做过优化的,而且谷歌的js执行速度也是最快的,但是鉴于目前的市场占有率还是要更多的考虑ff和ie,因此综合来说这里的“笨办法”其实是效率最高的办法。

回复 引用 查看

#39楼[楼主] 2009-05-20 22:30 cloudgamer

@浪峰

谢谢支持

@zkj

谢谢分析

回复 引用

#40楼 2009-05-24 00:07 duke

经典的代码啊! 楼主 请教一下:

如果我想让它可以地址栏传过来的年月日参数而自动改变显示日期 应该怎么改啊?我改了半天 没改对 o(∩_∩)o~

回复 引用 查看

#41楼[楼主] 2009-05-24 11:30 cloudgamer

@duke

你是后台还是前台获取

回复 引用

#42楼 2009-05-24 14:17 duke

在地址栏里 从后台传到前台的

回复 引用

#43楼 2009-05-24 14:22 duke

比如 我要做个站内搜索, 搜索某时间段内的 文档内容 ,搜索完成之后 下拉框里面还应该显示我没搜索之前选中的时间段不是么?

回复 引用 查看

#44楼[楼主] 2009-05-24 15:49 cloudgamer

@duke

那可以直接显示那个日期

var ds = new dateselector("idyear", "idmonth", "idday", {

year:0,//年

month:0,//月

day:0//日

});

像这样把日期写进去就行了

回复 引用

#45楼 2009-05-24 22:13 duke

呵呵 太牛了 谢谢 thanks verymuch

回复 引用

#46楼 2009-05-24 22:49 duke

一定要学好javascript 向楼主学习!!!

回复 引用 查看

#47楼[楼主] 2009-05-24 23:14 cloudgamer

@duke

呵呵

一起学习

回复 引用

#48楼 2009-06-03 09:15 云端侯[未注册用户]

不顶对不起自己,可以进中科院了

回复 引用 查看

#49楼 2009-07-05 21:07 豆浆油条

不知道二月份有没有bug,怎么没有2008年,好用来测试下

回复 引用 查看

#50楼[楼主] 2009-07-06 09:13 cloudgamer

@豆浆油条

没有的

你可以试试

回复 引用 查看

#51楼 2009-07-07 14:36 king.jiong

good

回复 引用

#52楼 2009-09-24 21:48 applezqp[未注册用户]

我也觉得修改比创建效率高,我有一个疑问,但是每个月的天数不同,所需要的option就不同,为什么不需要添加或删除,直接修改呢?

支持博主!

回复 引用 查看

#53楼[楼主] 2009-09-24 22:35 cloudgamer

@king.jiong

谢谢支持

@applezqp

在修改之前会先设置length,就等于修改了天数了

回复 引用

#54楼 2010-06-24 19:51 白子[未注册用户]

效果找对了,可代码得。。。难了点,有简约版的没?写不出来会被学长骂的。。。

回复 引用 查看

#55楼[楼主] 2010-06-25 00:03 cloudgamer

@白子

原理也很简单,或者自己写一个吧

回复 引用

#56楼 2010-08-26 16:28 缥缈孤鸿影[未注册用户]

这个控件我是和地区联动加在一起的,可能因为load的原因,放在一起就出问题,怎么解决啊 地区联动用的是在body中onload,里面是config函数

回复 引用 查看

#57楼[楼主] 2010-08-26 16:38 cloudgamer

@缥缈孤鸿影

命名冲突了吧

回复 引用

#58楼 2010-08-27 09:40 膜拜[未注册用户]

太厉害了。膜拜。

回复 引用

#59楼 2010-08-30 13:43 缥缈孤鸿影[未注册用户]

发现有个问题啊,比如现在是8月,我提交一个9月的日期,返回的是8月,其他月份设置都正确

回复 引用 查看

#60楼[楼主] 2010-08-30 14:03 cloudgamer

@膜拜

谢谢支持

回复 引用 查看

#61楼[楼主] 2010-08-30 14:04 cloudgamer

@缥缈孤鸿影

不明白

具体点

回复 引用

#62楼 2010-08-30 15:43 飘渺孤鸿影2[未注册用户]

我后台用的php,

选择之后提交,现在是8月,如果选择9月,提交后,提交过去的数据是8月,不是9月 ,其他月份正常

代码中有月加减1的操作,会不会是这里的问题呢?

回复 引用 查看

#63楼[楼主] 2010-08-30 16:21 cloudgamer

@飘渺孤鸿影2

应该不会

而且8月也没什么特殊的

检查一下你自己的代码吧

回复 引用 查看

#64楼 2010-09-10 13:44 小邓z

我想问下,把你的代码原封不动的封装成js文件后,页面就调用不到方法了哦!这个问题能解决不?

回复 引用 查看

#65楼[楼主] 2010-09-10 15:12 cloudgamer

@小邓z

这个你自己调试吧

应该不是代码问题

回复 引用 查看

#66楼 2010-09-10 15:31 小邓z

@cloudgamer

谢楼主了,调试通过...

另外你的js代码中为什么默认为2010,9,10呢?

能把这个默认改掉吗?

回复 引用 查看

#67楼[楼主] 2010-09-10 17:17 cloudgamer

@小邓z

可以取消的

自己研究一下吧

刷新评论列表刷新页面返回页首

发表评论

昵称: [登录]

[注册]

主页:

邮箱:(仅博主可见)

验证码:看不清。
       换一个

评论内容:

记住我的昵称和主页

-->

登录注册

[使用ctrl+enter键快速提交评论]

0

1040403

bbqmfv7pg0o=

首页博问闪存新闻园子招聘知识库

最新it新闻:

·windows 7官方rss动态主题：《昆虫》

·捡到iphone 4s玩自拍 icloud同步酿悲剧

·铁道部购票网站存泄密危险 cdn服务商技术短板是主因

·利用 mimo magictouch 打造另类的平板电脑

·但愿大嘴巴的消息再次失准

» 更多新闻...

最新知识库文章:

·设计师的品牌意识

·如何成为“10倍效率”开发者

·快速排序（quicksort）的javascript实现

·wcf服务端运行时架构体系详解[续篇]

·wcf服务端运行时架构体系详解[下篇]

» 更多知识库文章...

china-pub 2011秋季教材巡展

china-pub 计算机绝版图书按需印刷服务

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/