一个日期联动选择器,年月日联动显示,准确显示日期(包括闰年日期),可自定义日期范围。 效果预览: <script type="text/javascript"></script> 2009 2010 2011 年 1 2 3 4 5 6 7 8 9 10 11 12 月 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 日 你选择的日期:2010/4/28 <script></script> 程序说明
【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 ; i < iLength; i ++ ) { oSelect.options[i].text = oSelect.options[i].value = iStart + i; }
别看这么笨,却是最有效率的,而且不用每次都清空select,下面可以测试一下:
<script></script>
下面是完整测试代码:
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属性:
oSelect.selectedIndex
=
iIndex;
但要注意的是在ie6如果用dom方法创建option,然后立即设置selectedIndex会无效。 可以测试一下(在ie6测试):
<script></script>
测试代码:
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的同时设置:
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 = 1 <= iMonth && iMonth <= 12 ? iMonth : dt.getMonth() + 1 ; this .Day = iDay > 0 ? iDay : dt.getDate(); this .MinYear = iMinYear && iMinYear < this .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 ; i < iLength; i ++ ) { oSelect.options[i].text = oSelect.options[i].value = iStart + i; } // 设置选中项 oSelect.selectedIndex = iIndex; } };
完整实例下载