读书人
栏目▼

JavaScript 日期联动选择器解决方法

发布时间： 2012-02-14 19:19:19 作者： rapoo

JavaScript 日期联动选择器
一个日期联动选择器，年月日联动显示，准确显示日期（包括闰年日期），可自定义日期范围。

效果预览

程序说明

【select】

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

oSelect.options.length = 0;
给select添加option，有多个方法，如果用dom的标准方法是：

JScript code
var op = document.createElement("option"); op.value = i; op.innerHTML = i; oSelect.appendChild(op);

对于option有更方便的方法：
JScript code
oSelect.options.add(new Option(i, i));

其中new Option的第一个参数是显示的文本值，第二个是value值。
利用options.add的第二个可选参数可以把options插入到指定的索引位置，还有一个remove方法可以移除指定索引的options。
要注意的是options下标从0开始。

不过我这里用了一个看来比较笨的方法：
JScript code
oSelect.options.length = iLength;for (var i = 0; i < iLength; i++) { oSelect.options[i].text = oSelect.options[i].value = iStart + i; }

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



下面是完整测试代码：
JScript 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; i < len; 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; i <= iMax; 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; i <= iMax; 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属性：
JScript code
oSelect.selectedIndex = iIndex;

但要注意的是在ie6如果用dom方法创建option，然后立即设置selectedIndex会无效。
可以测试一下（在ie6测试）：


测试代码：
JScript 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; i <= 10; i++) {        var op = document.createElement("option"); op.value = op.innerHTML = i; oSelect.appendChild(op);    }    oSelect.selectedIndex = 5;}</script>


除了换另外两个方法创建select，还有三个方法解决，首先可以在添加option的同时设置：
JScript code
if(i == 4){ op.selected = true; }

还可以用setTimeout延迟一下：
JScript code
setTimeout(function(){ oSelect.selectedIndex = iIndex; }, 0);

最后是比较推荐的用setAttribute来设置：
JScript code
oSelect.options[iIndex].setAttribute("selected", "true");

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

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

使用说明：

首先是实例化一个DateSelector，其中三个参数分别是年月日的select对象。
可选参数：
Year: 0,//年
Month: 0,//月
Day: 0,//日
MinYear: 0,//最小年份
MaxYear: 0,//最大年份
onChange: function(){}//日期改变时执行

实例下载

[解决办法]
好东西，谢谢分享
[解决办法]
顶一下。
[解决办法]
BUG报告：
先选择2008-2-29
再改变年到2009

上下显示就不一致鸟。
“2009年2月1日”
“你选择的日期：2009/2/28”

不用太感谢我。
[解决办法]
ff3.0
[解决办法]
eee
[解决办法]
很好，真是写得精辟！！！
[解决办法]
三步：
1、选择日期到“2008-02-28”
2、改变号数到“29”
3、改变年份到“2009”
FF3中则出现不一致；
IE8测试没有问题。
[解决办法]
探讨
奇怪
我这里测试是正常的啊

你试试把实例下下来在本地试试

[解决办法]
别的不说，对select的操作，学习了不少
顶
[解决办法]

，，，截图为证，，，

这个问题可以忽略
[解决办法]
很不错啊，我在FF3.0测试正常。
[解决办法]
调试环境：Windows 2003 Server Mozilla/5.0 (Windows; U; Windows NT 5.2; zh-CN; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4 (.NET CLR 3.5.30729)
[解决办法]
mark!~
ie 6 ff3.0 没发现以上现象。。。。。。。
[解决办法]
错了 是ff2.0
[解决办法]
也许是浏览器的BUG。
[解决办法]
好，又学到了不少知识，以前模糊的概念，经过这么一讲解清晰了很多，多谢！
[解决办法]
我也发现zswang说的现象了，我的是XP，ie7，ff3.0.4，ie7下没问题，ff下和zswang的一样，上面显示2月1日，下面显示2月28日。

[解决办法]

[解决办法]
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4
[解决办法]
探讨
我也测试出来问题了
但如果下载实例在本地测试就没有问题
这就怪了
继续测试

[解决办法]
比如用ff就能看到祥云的title背景图片，而ie下就看不到图片。


[解决办法]
谢谢LZ
[解决办法]
瑞意日期选择框 RCalendar 2.0
http://www.rainic.com/blog/index.php/209

相对于1.1版本，有如下更新：

1. 修正了IE7中的少量兼容问题
2. 新增了时分秒的选择，使rcalendar变成有两种模式，dateonly和full，默认是dateonly
3. 新增“确定”和“清除”两个按钮
4. 修正了Opera中微小的兼容问题
5. 增强了对日期格式的容错处理
6. 新增了选择日期后的事件处理函数的参数
[解决办法]
上面那个日期选择控件是兼容IE、Firefox、Opera、Safari、Chrome的
[解决办法]
ding yi xia
[解决办法]
http://topic.csdn.net/t/20040723/13/3203177.html

这是我04年写的差不多功能的代码.
[解决办法]
看得不太懂```
[解决办法]
收藏
[解决办法]
mark
[解决办法]
楼主你太牛逼了
佩服
[解决办法]
学习了!LZ ,谢谢.
[解决办法]
学习
[解决办法]
学习 3Q LZ
[解决办法]
mark
[解决办法]
赞~
[解决办法]
收藏学习
[解决办法]
学习了...
[解决办法]
mark
[解决办法]
受用
[解决办法]
学习
[解决办法]
好好
[解决办法]
学习
[解决办法]
好东西 顶了...
[解决办法]
谢了，真的是个实用的·····
[解决办法]
多谢楼主，已下载！顶下你。
[解决办法]
xiexie
[解决办法]
BUG报告：
先选择2008-2-29
再改变年到2009

上下显示就不一致鸟。
“2009年2月1日”
“你选择的日期：2009/2/28”

不用太感谢我。
[解决办法]
效果不错，只是我的水平低
[解决办法]

[解决办法]
LZ JS就是强
[解决办法]
不错，值得收藏。
------解决方案--------------------


好东西，收藏了
[解决办法]
mark
[解决办法]
好贴~
[解决办法]
收藏
[解决办法]
好，谢谢分享。
[解决办法]
.........
[解决办法]
收藏
[解决办法]
学习，收藏
[解决办法]
好东西 顶
[解决办法]
好东西 顶
[解决办法]
mark
[解决办法]
<html>
<head>
<title>年月日三下拉框联动</title>
<meta http-equiv='Content-Type' content='text/html; charset=gb2312'>
<meta name='author' content='F.R.Huang(meizz梅花雪)//www.meizz.com'>
</head>

<body>
<form name=form1>
<select name=YYYY onChange="YYYYDD(this.value)">
<option value="">请选择 年</option>
</select>
<select name=MM onChange="MMDD(this.value)">
<option value="">选择 月</option>
</select>
<select name=DD>
<option value="">选择 日</option>
</select>
</form>

<script language="JavaScript"><!--
function YYYYMMDDstart()
{
MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

//先给年下拉框赋内容
var y = new Date().getFullYear();
for (var i = (y-30); i < (y+30); i++) //以今年为准，前30年，后30年
document.form1.YYYY.options.add(new Option(" "+ i +" 年", i));

//赋月份的下拉框
for (var i = 1; i < 13; i++)
document.form1.MM.options.add(new Option(" " + i + " 月", i));

document.form1.YYYY.value = y;
document.form1.MM.value = new Date().getMonth() + 1;
var n = MonHead[new Date().getMonth()];
if (new Date().getMonth() ==1 && IsPinYear(YYYYvalue)) n++;
writeDay(n); //赋日期下拉框Author:meizz
document.form1.DD.value = new Date().getDate();
}
if(document.attachEvent)
window.attachEvent("onload", YYYYMMDDstart);
else
window.addEventListener('load', YYYYMMDDstart, false);
function YYYYDD(str) //年发生变化时日期发生变化(主要是判断闰平年)
{
var MMvalue = document.form1.MM.options[document.form1.MM.selectedIndex].value;
if (MMvalue == ""){ var e = document.form1.DD; optionsClear(e); return;}
var n = MonHead[MMvalue - 1];
if (MMvalue ==2 && IsPinYear(str)) n++;
writeDay(n)
}
function MMDD(str) //月发生变化时日期联动
{
var YYYYvalue = document.form1.YYYY.options[document.form1.YYYY.selectedIndex].value;
if (YYYYvalue == ""){ var e = document.form1.DD; optionsClear(e); return;}
var n = MonHead[str - 1];
if (str ==2 && IsPinYear(YYYYvalue)) n++;
writeDay(n)
}
function writeDay(n) //据条件写日期的下拉框
{
var e = document.form1.DD; optionsClear(e);
for (var i=1; i<(n+1); i++)
e.options.add(new Option(" "+ i + " 日", i));
}
function IsPinYear(year)//判断是否闰平年
{ return(0 == year%4 && (year%100 !=0 || year%400 == 0));}
function optionsClear(e)
{
e.options.length = 1;
}
//--></script>
</body>


</html>

[解决办法]
谢谢你们的分享！！！
[解决办法]

[解决办法]
不错！收藏起来慢慢研究
[解决办法]
mark一下。
学习
[解决办法]
谢谢 收藏了

[解决办法]
没有问题，很好呀。。
[解决办法]
顶一下
[解决办法]

[解决办法]

[解决办法]
学到了不少东西，感谢楼主的提问和各位大侠的真知灼见！
[解决办法]
mark/
[解决办法]

[解决办法]
收了，上次还找不到这个东东
[解决办法]
学习
[解决办法]
mark
[解决办法]
先顶再看。。。。。。
[解决办法]
mark一下,不错的东西。
[解决办法]
mark!
[解决办法]
很不错

已帮楼主推荐：http://bolm.cn/view.php?id=568
演示地址：http://bolm.cn/go.php?id=568
[解决办法]
不错

读书人网 >JavaScript

热点推荐

触屏版 | 电脑版

读书人网 m.reader8.net