<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>日期下拉菜单</title> <mce:script type="text/javascript"><!-- 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); } } } Object.extend = function(destination, source) { for ( var property in source) { destination[property] = source[property]; } return destination; } var DateSelector = Class.create(); DateSelector.prototype = { initialize : function(idYear, idMonth, idDay, options) { var oYear = $(idYear), oMonth = $(idMonth), oDay = $(idDay), dt = new Date(), i = 0; this.oYear = oYear; this.oMonth = oMonth; this.oDay = oDay; this.SetOptions(options); var iYear = parseInt(this.options.Year), iMonth = parseInt(this.options.Month), iDay = parseInt(this.options.Day); this.Year = iYear > 1900 ? iYear : dt.getFullYear(); this.Month = 1 <= iMonth && iMonth <= 12 ? iMonth : dt.getMonth() + 1; this.Day = iDay > 0 ? iDay : dt.getDate(); this.MinYear = this.Year - (parseInt(this.options.MinYear) || 0); this.MaxYear = this.Year + (parseInt(this.options.MaxYear) || 0); this.SetYear(); this.SetMonth(); this.SetDay(); var oThis = this; addEventHandler(oYear, "change", function() { oThis.onYearChange() }); addEventHandler(oMonth, "change", function() { oThis.onMonthChange() }); addEventHandler(oDay, "change", function() { oThis.onDayChange() }); }, //设置默认属性 SetOptions : function(options) { this.options = {//默认值 Year :0,//年 Month :0,//月 Day :0,//日 MinYear :0,//最小年份与year相差的年数 MaxYear :5 //最大年份与year相差的年数 }; Object.extend(this.options, options || {}); }, //年改变事件 onYearChange : function() { this.Year = this.oYear.value; this.SetDay(); }, //月改变事件 onMonthChange : function() { this.Month = this.oMonth.value; this.SetDay(); }, //日改变事件 onDayChange : function() { this.Day = this.oDay.value; }, //年设置 SetYear : function() { this.SetSelect(this.oYear, this.MinYear, this.MaxYear, this.Year - this.MinYear); }, //月设置 SetMonth : function() { this.SetSelect(this.oMonth, 1, 12, this.Month - 1); }, //日设置 SetDay : function() { //这里技巧地取得月份天数 var daysInMonth = new Date(this.Year, this.Month, 0).getDate(); if (this.Day > daysInMonth) { this.Day = daysInMonth; } ; this.SetSelect(this.oDay, 1, daysInMonth, this.Day - 1); }, //select设置 SetSelect : function(oSelect, iMin, iMax, iIndex) { oSelect.options.length = 0; for ( var i = iMin; i <= iMax; i++) { var op = document.createElement("OPTION"); op.value = i; op.innerHTML = i; oSelect.appendChild(op); } oSelect.selectedIndex = iIndex; } }; // --></mce:script> </head> <body> <select id="idYear"></select> <select id="idMonth"></select> <select id="idDay"></select> <mce:script type="text/javascript"><!-- new DateSelector("idYear", "idMonth", "idDay", { minyear :10, maxyear :10 }); // --></mce:script> </body> </html>
本文介绍了一个使用JavaScript实现的日期选择器，该选择器通过下拉菜单形式让用户选择年、月、日。支持自定义日期范围，并能根据所选年月自动调整当月天数。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
