兼容火狐的获取时间的控件,支持时,分,秒的选择

js 部分 var cal var isFocus false 是否为焦点 var pickMode second 1 minute 2 hour 3 day 4 month 5 year 6 var topY 0 leftX 0 自定义定位偏移量 2007 02 11 由 寒羽枫添加 选择日期 由 寒羽枫 2007 06 10 添加 通过 ID 来选日期 function SelectDateById id strFormat x y var obj document getElementById id if obj null return false obj focus if obj onclick null obj onclick else if obj click null obj click else SelectDate obj strFormat x y 选择日期 由 寒羽枫 2006 06 25 添加 function SelectDate obj strFormat x y leftX x null leftX x topY y null topY y 自定义定位偏移量 2007 02 11 由 寒羽枫添加 if document getElementById ContainerPanel null InitContainerPanel var date new Date var by date getFullYear 50 最小值 50 年前 var ey date getFullYear 50 最大值 50 年后 cal new Calendar by ey 1 strFormat 初始化英文版 0 为中文版 cal cal null new Calendar by ey 0 cal 不用每次都初始化 2006 12 03 修 正 cal DateMode pickMode second 复位 if strFormat indexOf s 0 cal DateMode pickMode minute 精度为分 if strFormat indexOf m 0 cal DateMode pickMode hour 精度为时 if strFormat indexOf h 0 cal DateMode pickMode day 精度为日 if strFormat indexOf d 0 cal DateMode pickMode month 精度为月 if strFormat indexOf M 0 cal DateMode pickMode year 精度为年 if strFormat indexOf y 0 ev indexOf ValidatorOnChange 20 ev indexOf 1 ev lastIndexOf 去除验证函数 ValidatorOnChange var fun new Function ev 重新定义函数 this dateControl changeEvent fun this dateControl changeEvent 触发自定义 changeEvent 函数 日历类 param beginYear 1990 param endYear 2010 param lang 0 中文 1 英语 可自由扩充 param dateFormatStyle yyyy MM dd version 2006 04 01 author KimSoft jinqinghua at update function Calendar beginYear endYear lang dateFormatStyle this beginYear 1950 this endYear 2050 this lang 0 0 中文 1 英文 this dateFormatStyle yyyy MM dd hh mm ss if beginYear null this endYear endYear if lang null this lang lang if dateFormatStyle null this dateFormatStyle dateFormatStyle this dateControl null this panel this getElementById calendarPanel this container this getElementById ContainerPanel this form null this date new Date this year this date getFullYear this month this date getMonth this day this date getDate this hour this date getHours this minute this date getMinutes this second this date getSeconds this colors cur word FFFFFF 当日日期文字颜色 cur bg 00FF00 当日日期单元格背影色 sel bg FFCCCC 已被选择的日期单元格背影色 2006 12 03 寒羽枫添加 sun word FF0000 星期天文字颜色 sat word 0000FF 星期六文字颜色 td word light 333333 单元格文字颜色 td word dark CCCCCC 单元格文字暗色 td bg out EFEFEF 单元格背影色 td bg over FFCC00 单元格背影色 tr word FFFFFF 日历头文字颜色 tr bg 666666 日历头背影色 input border CCCCCC input 控件的边框颜色 input bg EFEFEF input 控件的背影色 2008 01 29 放到了 show 因为要做 pickMode 判断 this draw this bindYear this bindMonth this changeSelect this bindData 2006 12 30 由民工 砖家注释 日历类属性 语言包 可自由扩展 Calendar language year months 一月 二月 三月 四月 五月 六月 七月 八月 九月 十月 十一 月 十二月 JAN FEB MAR APR MAY JUN JUL AUG SEP OCT NOV DEC weeks 日 一 二 三 四 五 六 SUN MON TUR WED THU FRI SAT hour 时 H minute 分 M second 秒 S clear 清空 CLS today 今天 TODAY pickTxt 确定 OK pickMode 精确到年 月时把今天变成 确定 close 关闭 CLOSE Calendar prototype draw function calendar this var mvAry mvAry mvAry length 因 不能嵌套 2006 12 01 由寒羽枫改用 Div mvAry mvAry length mvAry mvAry length mvAry mvAry length mvAry mvAry length pickMode month mvAry mvAry length display none pickMode 精确到年时隐藏 月 mvAry mvAry length name prevMonth type button id prevMonth value mvAry mvAry length pickMode month mvAry mvAry length display none pickMode 精确到年时隐藏 月 mvAry mvAry length mvAry mvAry length pickMode month mvAry mvAry length display none pickMode 精确到年时隐藏 月 mvAry mvAry length name nextMonth type button id nextMonth value mvAry mvAry length mvAry mvAry length mvAry mvAry length pickMode month mvAry mvAry length display none pickMode 精确到年 月时隐藏 天 mvAry mvAry length border 0 cellpadding 3 cellspacing 1 mvAry mvAry length for var i 0 i 7 i mvAry mvAry length Calendar language weeks this lang i mvAry mvAry length for var i 0 i 6 i mvAry mvAry length for var j 0 j 7 j if j 0 mvAry mvAry length else if j 6 mvAry mvAry length else mvAry mvAry length mvAry mvAry length 2009 03 03 添加的代码 放置时间的行 mvAry mvAry length pickMode day mvAry mvAry length display none pickMode 精确到时日隐藏 时间 mvAry mvAry length mvAry mvAry length Calendar language hour this lang mvAry mvAry length pickMode hour mvAry mvAry length display none pickMode 精确到小时时隐藏 分 mvAry mvAry length Calendar language minute this lang mvAry mvAry length pickMode minute mvAry mvAry length display none pickMode 精确到小时 分时隐藏 秒 mvAry mvAry length Calendar language second this lang mvAry mvAry length mvAry mvAry length mvAry mvAry length mvAry mvAry length mvAry mvAry length mvAry mvAry length mvAry mvAry length mvAry mvAry length mvAry mvAry length this panel innerHTML mvAry join 以下代码由寒羽枫 2006 12 01 添加 var obj this getElementById prevMonth obj onclick function calendar goPrevMonth calendar obj onblur function calendar onblur this prevMonth obj obj this getElementById nextMonth obj onclick function calendar goNextMonth calendar obj onblur function calendar onblur this nextMonth obj obj this getElementById calendarClear obj onclick function calendar ReturnDate calendar dateControl value calendar hide 2007 09 14 由 寒羽枫注释 this calendarClear obj obj this getElementById calendarClose obj onclick function calendar hide this calendarClose obj obj this getElementById calendarYear obj onchange function calendar update calendar obj onblur function calendar onblur this calendarYear obj obj this getElementById calendarMonth with obj onchange function calendar update calendar onblur function calendar onblur this calendarMonth obj obj this getElementById calendarHour obj onchange function calendar hour this options this selectedIndex value obj onblur function calendar onblur this calendarHour obj obj this getElementById calendarMinute obj onchange function calendar minute this options this selectedIndex value obj onblur function calendar onblur this calendarMinute obj obj this getElementById calendarSecond obj onchange function calendar second this options this selectedIndex value obj onblur function calendar onblur this calendarSecond obj obj this getElementById calendarToday obj onclick function var today calendar DateMode pickMode day new Date calendar year calendar month calendar day calendar hour calendar minute calendar second new Date 2008 01 29 calendar ReturnDate today format calendar dateFormatStyle this calendarToday obj 年份下拉框绑定数据 Calendar prototype bindYear function var cy this calendarYear 2006 12 01 由寒羽枫修改 cy length 0 for var i this beginYear i this endYear i cy options cy length new Option i Calendar language year this lang i 月份下拉框绑定数据 Calendar prototype bindMonth function var cm this calendarMonth 2006 12 01 由寒羽枫修改 cm length 0 for var i 0 i 0 return 2009 03 03 不需要重新绑定 提高性能 ch length 0 var h for var i 0 i 0 return 2009 03 03 不需要重新绑定 提高性能 cM length 0 var M for var i 0 i 0 return 2009 03 03 不需要重新绑定 提高性能 cs length 0 var s for var i 0 i pickMode month return 2008 01 29 var dateArray this getMonthViewArray this date getYear this date getMonth 2006 12 30 由民工 砖家修改 在 Firefox 下年份错误 var dateArray this getMonthViewArray this date getFullYear this date getMonth var tds this getElementById calendarTable getElementsByTagName td for var i 0 i dateArray length 1 break tds i innerHTML dateArray i if dateArray i tds i bgColorTxt td bg out 2009 03 03 保存背景色的 class var cur new Date tds i isToday false if cur getFullYear calendar date getFullYear tds i bgColorTxt cur bg tds i isToday true if calendar dateControl null cur calendar dateControl value toDate calendar dateFormatStyle if cur getFullYear calendar date getFullYear tds i style backgroundColor calendar colors sel bg tds i bgColorTxt sel bg tds i onclick function if calendar DateMode pickMode day 2009 03 03 当选择日期时 点击 格子即返回值 calendar ReturnDate new Date calendar date getFullYear calendar date getMonth this innerHTML format calendar dateFormatStyle else if calendar selectedDayTD null 2009 03 03 清除已选中的背景色 calendar selectedDayTD style backgroundColor calendar selectedDayTD isToday calendar colors cur bg calendar colors td bg out this style backgroundColor calendar colors sel bg calendar day this innerHTML calendar selectedDayTD this 2009 03 03 记录已选中的日子 tds i style cursor pointer 2007 08 06 由寒羽枫添加 鼠标变成手指状 tds i onmouseover function this style backgroundColor calendar colors td bg over tds i onmouseout function if calendar selectedDayTD this this style backgroundColor calendar colors this bgColorTxt tds i onblur function calendar onblur 根据年 月得到月视图数据 数组形式 Calendar prototype getMonthViewArray function y m var mvArray var dayOfFirstDay new Date y m 1 getDay var daysOfMonth new Date y m 1 0 getDate for var i 0 i 42 i mvArray i for var i 0 i 0 new Date dateObj value toDate this dateFormatStyle now format this dateFormatStyle toDate this dateFormatStyle 2008 01 29 寒羽枫添加 若为空则根据 dateFormatStyle 初始化日期 if this panel innerHTML cal dateFormatStyleOld cal dateFormatStyle 2008 01 29 把 构造表格放在此处 2009 03 03 若请示的样式改变 则重新初始化 this draw this bindYear this bindMonth this bindHour this bindMinute this bindSecond this year this date getFullYear this month this date getMonth this day this date getDate this hour this date getHours this minute this date getMinutes this second this date getSeconds this changeSelect this bindData if popControl null popControl dateObj var xy this getAbsPoint popControl this panel style left xy x px this panel style top xy y dateObj offsetHeight px this panel style left xy x leftX px 由寒羽枫 2007 02 11 修改 加入自定义偏 移量 this panel style top xy y topY dateObj offsetHeight px 由寒羽枫 2006 06 25 修改 把 visibility 变为 display 并添加失去焦点的事件 this setDisplayStyle select hidden this panel style visibility visible this container style visibility visible this panel style display this container style display if this dateControl isTransEvent this dateControl isTransEvent true 已写在返回值的时候 ReturnDate 函数中 去除验证事件的函数 this dateControl