JavaScript 日期联动选择器

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

效果预览：

程序说明

【select】

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

Java代码

oSelect.options.length = 0;

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

Java代码

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

对于option有更方便的方法：

Java代码

oSelect.options.add(new Option(i, i));

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

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

Java代码

oSelect.options.length = iLength;
for (var i = 0; i < iLength; i++) { oSelect.options[i].text = oSelect.options[i].value = iStart + i; }

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

Java代码

<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属性：

Java代码

oSelect.selectedIndex = iIndex;

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

Java代码

<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的同时设置：

Java代码

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

还可以用setTimeout延迟一下：

Java代码

setTimeout(function(){ oSelect.selectedIndex = iIndex; }, 0);

最后是比较推荐的用setAttribute来设置：

Java代码

oSelect.options[iIndex].setAttribute("selected", "true");

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

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

使用说明：

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

JavaScript 日期联动选择器相关推荐

php中日期选择代码,实现JS日期时间选择器
这次给大家带来实现JS日期时间选择器,实现JS日期时间选择器的注意事项有哪些,下面就是实战案例,一起来看一下. flatpickr 是一个轻量级.注重精益.由 UX 驱动和可扩展的 JavaScrip ...
微信小程序----日期时间选择器（自定义精确到分秒或时段）
声明 bug:由于此篇博客是在bindcolumnchange事件中做的值的改变处理,因此会出现当你选择时,没有点击确定,直接取消返回后,会发现选择框的值依然改变. 造成原因:这一点就是由于在bind ...
如何造一个移动端的联动选择器（三）
之前写了一篇 MultiPicker -『为移动端而生』的自定义多级联动选择器,得到了很多人的关注.鉴于很多人对这种手写插件的过程很好奇,所以写了几篇文章,来说说它的成长史~ 这一阶段,你将会了解到页 ...
如何将JavaScript日期转换为UTC？
假设您网站的用户输入了日期范围. 2009-1-1 to 2009-1-3 您需要将此日期发送到服务器进行某些处理,但是服务器希望所有日期和时间都采用UTC. 现在,假设用户位于阿拉斯加,夏威夷或斐济 ...
日期时间选择器bootstrap（手机适应）
使用的是开源的架构可以git clone git://github.com/smalot/bootstrap-datetimepicker.git 截图十年视图年视图月视图日视图* 小时视 ...
微信小程序-日期时间选择器
我在官方表单组件的基础上改出了几种比较常用的日期(时间)选择器,为了更清晰,我没给任何样式,wxss可根据个人喜好添加. 一.picker-view (嵌入页面的滚动选择器) 注意:其中只可放置组件, ...
微信小程序----日期时间选择器（自定义精确到分秒或时段）（MUI日期时间）
效果体验二维码(外联图片失效了) 如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢! 声明 bug:由于此篇博客是在bindcolumnchange事件中做的值的改变处 ...
jaDate日期控件开始日期与结束日期、日期联动
一.效果使用jaDate日期控件:一个为开始日期,另外一个为结束日期,两个日期之间建立相互约束关系.即开始日期不能大于结束日期,结束日期不能小于开始日期. 二.所需插件三.代码注意:设置最小日期 ...
html css 范围选择框,jquery日期范围选择器插件
这是一款jquery日期范围选择器插件.该jquery日期范围选择器插件基于bootstrap,它提供日期范围选择功能,字符串本地化功能,时间选择功能等,功能非常强大. 使用方法该jquery日期范 ...

JavaScript 日期联动选择器

JavaScript 日期联动选择器相关推荐

最新文章

热门文章