兼容FireFox 的 js 日历 支持时间的获取


Posted in Javascript onMarch 04, 2009
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) {cal.DateMode =pickMode["second"];}//默认精度为秒 
cal.dateFormatStyleOld = cal.dateFormatStyle; 
cal.dateFormatStyle = strFormat; 
cal.show(obj); 
} 
/**//**//**//**//**//**//**//** 
* 返回日期 
* @param d the delimiter 
* @param p the pattern of your date 
2006-06-25 由 寒羽枫 修改为根据用户指定的 style 来确定; 
*/ 
String.prototype.toDate = function(style) { 
var y = this.substring(style.indexOf('y'),style.lastIndexOf('y')+1);//年 
var M = this.substring(style.indexOf('M'),style.lastIndexOf('M')+1);//月 
var d = this.substring(style.indexOf('d'),style.lastIndexOf('d')+1);//日 
var h = this.substring(style.indexOf('h'),style.lastIndexOf('h')+1);//时 
var m = this.substring(style.indexOf('m'),style.lastIndexOf('m')+1);//分 
var s = this.substring(style.indexOf('s'),style.lastIndexOf('s')+1);//秒 
if(s == null ||s == "" || isNaN(s)) {s = new Date().getSeconds();} 
if(m == null ||m == "" || isNaN(m)) {m = new Date().getMinutes();} 
if(h == null ||h == "" || isNaN(h)) {h = new Date().getHours();} 
if(d == null ||d == "" || isNaN(d)) {d = new Date().getDate();} 
if(M == null ||M == "" || isNaN(M)) {M = new Date().getMonth()+1;} 
if(y == null ||y == "" || isNaN(y)) {y = new Date().getFullYear();} 
var dt ; 
eval ("dt = new Date('"+ y+"', '"+(M-1)+"','"+ d+"','"+ h+"','"+ m+"','"+ s +"')"); 
return dt; 
} 
/**//**//**//**//**//**//**//** 
* 格式化日期 
* @param d the delimiter 
* @param p the pattern of your date 
* @author meizz 
*/ 
Date.prototype.format = function(style) { 
var o = { 
"M+" : this.getMonth() + 1, //month 
"d+" : this.getDate(), //day 
"h+" : this.getHours(), //hour 
"m+" : this.getMinutes(), //minute 
"s+" : this.getSeconds(), //second 
"w+" : "天一二三四五六".charAt(this.getDay()), //week 
"q+" : Math.floor((this.getMonth() + 3) / 3), //quarter 
"S" : this.getMilliseconds() //millisecond 
} 
if(/(y+)/.test(style)) { 
style = style.replace(RegExp.$1, 
(this.getFullYear() + "").substr(4 - RegExp.$1.length)); 
} 
for(var k in o){ 
if(new RegExp("("+ k +")").test(style)){ 
style = style.replace(RegExp.$1, 
RegExp.$1.length == 1 ? o[k] : 
("00" + o[k]).substr(("" + o[k]).length)); 
} 
} 
return style; 
} 
//2007-09-14 由寒羽枫添加返回所选日期 
Calendar.prototype.ReturnDate = function(dt) { 
if (this.dateControl != null){this.dateControl.value = dt;} 
calendar.hide(); 
    if(this.dateControl.onchange == null){return;}     
    //将 onchange 转成其它函数,以免触发验证事件 
var ev = this.dateControl.onchange.toString(); //找出函数的字串 
ev = ev.substring( 
            ((ev.indexOf("ValidatorOnChange();")> 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] gmail.com) 
* @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 && endYear != null){ 
this.beginYear = beginYear; 
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] = ' <form name="calendarForm" style="margin: 0px;">'; //因 <form> 不能嵌套, 2006-12-01 由寒羽枫改用 Div 
mvAry[mvAry.length] = ' <div name="calendarForm" style="margin: 0px;">'; 
mvAry[mvAry.length] = ' <table width="100%" border="0" cellpadding="0" cellspacing="1" style="font-size:12px;">'; 
mvAry[mvAry.length] = ' <tr>'; 
mvAry[mvAry.length] = ' <th align="left" width="1%"><input style="border: 1px solid ' + calendar.colors["input_border"] + ';background-color:' + calendar.colors["input_bg"] + ';width:16px;height:20px;'; 
if(calendar.DateMode > pickMode["month"]){mvAry[mvAry.length] = 'display:none;';}//pickMode 精确到年时隐藏“月” 
mvAry[mvAry.length] ='" name="prevMonth" type="button" id="prevMonth" value="&lt;" /></th>'; 
mvAry[mvAry.length] = ' <th align="center" width="98%" nowrap="nowrap"><select name="calendarYear" id="calendarYear" style="font-size:12px;"></select><select name="calendarMonth" id="calendarMonth" style="font-size:12px;'; 
if(calendar.DateMode > pickMode["month"]){mvAry[mvAry.length] = 'display:none;';}//pickMode 精确到年时隐藏“月” 
mvAry[mvAry.length] = '"></select></th>'; 
mvAry[mvAry.length] = ' <th align="right" width="1%"><input style="border: 1px solid ' + calendar.colors["input_border"] + ';background-color:' + calendar.colors["input_bg"] + ';width:16px;height:20px;'; 
if(calendar.DateMode > pickMode["month"]){mvAry[mvAry.length] = 'display:none;';}//pickMode 精确到年时隐藏“月” 
mvAry[mvAry.length] ='" name="nextMonth" type="button" id="nextMonth" value="&gt;" /></th>'; 
mvAry[mvAry.length] = ' </tr>'; 
mvAry[mvAry.length] = ' </table>'; 
mvAry[mvAry.length] = ' <table id="calendarTable" width="100%" style="border:0px solid #CCCCCC;background-color:#FFFFFF;font-size:12px;'; 
if(calendar.DateMode >= pickMode["month"]){mvAry[mvAry.length] = 'display:none;';}//pickMode 精确到年、月时隐藏“天” 
mvAry[mvAry.length] = '" border="0" cellpadding="3" cellspacing="1">'; 
mvAry[mvAry.length] = ' <tr>'; 
for(var i = 0; i < 7; i++) { 
mvAry[mvAry.length] = ' <th style="font-weight:normal;background-color:' + calendar.colors["tr_bg"] + ';color:' + calendar.colors["tr_word"] + ';">' + Calendar.language["weeks"][this.lang][i] + '</th>'; 
} 
mvAry[mvAry.length] = ' </tr>'; 
for(var i = 0; i < 6;i++){ 
mvAry[mvAry.length] = ' <tr align="center">'; 
for(var j = 0; j < 7; j++) { 
if (j == 0){ 
mvAry[mvAry.length] = ' <td style="cursor:default;color:' + calendar.colors["sun_word"] + ';"></td>'; 
} else if(j == 6) { 
mvAry[mvAry.length] = ' <td style="cursor:default;color:' + calendar.colors["sat_word"] + ';"></td>'; 
} else { 
mvAry[mvAry.length] = ' <td style="cursor:default;"></td>'; 
} 
} 
mvAry[mvAry.length] = ' </tr>'; 
} 
//2009-03-03 添加的代码,放置时间的行 
mvAry[mvAry.length] = ' <tr style="'; 
if(calendar.DateMode >= pickMode["day"]){mvAry[mvAry.length] = 'display:none;';}//pickMode 精确到时日隐藏“时间” 
mvAry[mvAry.length] = '"><td align="center" colspan="7">'; 
mvAry[mvAry.length] = ' <select name="calendarHour" id="calendarHour" style="font-size:12px;"></select>' + Calendar.language["hour"][this.lang]; 
mvAry[mvAry.length] = '<span style="' 
if(calendar.DateMode >= pickMode["hour"]){mvAry[mvAry.length] = 'display:none;';}//pickMode 精确到小时时隐藏“分” 
mvAry[mvAry.length] = '"><select name="calendarMinute" id="calendarMinute" style="font-size:12px;"></select>' + Calendar.language["minute"][this.lang]+'</span>'; 
mvAry[mvAry.length] = '<span style="' 
if(calendar.DateMode >= pickMode["minute"]){mvAry[mvAry.length] = 'display:none;';}//pickMode 精确到小时、分时隐藏“秒” 
mvAry[mvAry.length] = '"><select name="calendarSecond" id="calendarSecond" style="font-size:12px;"></select>'+ Calendar.language["second"][this.lang]+'</span>'; 
mvAry[mvAry.length] = ' </td></tr>'; 
mvAry[mvAry.length] = ' </table>'; 
//mvAry[mvAry.length] = ' </from>'; 
mvAry[mvAry.length] = ' <div align="center" style="padding:4px 4px 4px 4px;background-color:' + calendar.colors["input_bg"] + ';">'; 
mvAry[mvAry.length] = ' <input name="calendarClear" type="button" id="calendarClear" value="' + Calendar.language["clear"][this.lang] + '" style="border: 1px solid ' + calendar.colors["input_border"] + ';background-color:' + calendar.colors["input_bg"] + ';width:40px;height:20px;font-size:12px;cursor:pointer;"/>'; 
mvAry[mvAry.length] = ' <input name="calendarToday" type="button" id="calendarToday" value="' 
mvAry[mvAry.length] = (calendar.DateMode == pickMode["day"]) ? Calendar.language["today"][this.lang] : Calendar.language["pickTxt"][this.lang]; 
mvAry[mvAry.length] = '" style="border: 1px solid ' + calendar.colors["input_border"] + ';background-color:' + calendar.colors["input_bg"] + ';width:60px;height:20px;font-size:12px;cursor:pointer"/>'; 
mvAry[mvAry.length] = ' <input name="calendarClose" type="button" id="calendarClose" value="' + Calendar.language["close"][this.lang] + '" style="border: 1px solid ' + calendar.colors["input_border"] + ';background-color:' + calendar.colors["input_bg"] + ';width:40px;height:20px;font-size:12px;cursor:pointer"/>'; 
mvAry[mvAry.length] = ' </div>'; 
mvAry[mvAry.length] = ' </div>'; 
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 < 12; i++){ 
cm.options[cm.length] = new Option(Calendar.language["months"][this.lang][i], i); 
} 
} 
//小时下拉框绑定数据 
Calendar.prototype.bindHour = function() { 
var ch = this.calendarHour; 
if(ch.length > 0){return;}//2009-03-03 不需要重新绑定,提高性能 
//ch.length = 0; 
var h; 
for (var i = 0; i < 24; i++){ 
h = ("00" + i +"").substr(("" + i).length); 
ch.options[ch.length] = new Option(h, h); 
} 
} 
//分钟下拉框绑定数据 
Calendar.prototype.bindMinute = function() { 
var cM = this.calendarMinute; 
if(cM.length > 0){return;}//2009-03-03 不需要重新绑定,提高性能 
//cM.length = 0; 
var M; 
for (var i = 0; i < 60; i++){ 
M = ("00" + i +"").substr(("" + i).length); 
cM.options[cM.length] = new Option(M, M); 
} 
} 
//秒钟下拉框绑定数据 
Calendar.prototype.bindSecond = function() { 
var cs = this.calendarSecond; 
if(cs.length > 0){return;}//2009-03-03 不需要重新绑定,提高性能 
//cs.length = 0; 
var s; 
for (var i = 0; i < 60; i++){ 
s = ("00" + i +"").substr(("" + i).length); 
cs.options[cs.length] = new Option(s, s); 
} 
} 
//向前一月 
Calendar.prototype.goPrevMonth = function(e){ 
if (this.year == this.beginYear && this.month == 0){return;} 
this.month--; 
if (this.month == -1) { 
this.year--; 
this.month = 11; 
} 
this.date = new Date(this.year, this.month, 1); 
this.changeSelect(); 
this.bindData(); 
} 
//向后一月 
Calendar.prototype.goNextMonth = function(e){ 
if (this.year == this.endYear && this.month == 11){return;} 
this.month++; 
if (this.month == 12) { 
this.year++; 
this.month = 0; 
} 
this.date = new Date(this.year, this.month, 1); 
this.changeSelect(); 
this.bindData(); 
} 
//改变SELECT选中状态 
Calendar.prototype.changeSelect = function() { 
var cy = this.calendarYear;//2006-12-01 由寒羽枫修改 
var cm = this.calendarMonth; 
var ch = this.calendarHour; 
var cM = this.calendarMinute; 
var cs = this.calendarSecond; 
//2006-12-30 由民工.砖家修改,减少运算次数 
cy[this.date.getFullYear()-this.beginYear].selected = true; 
cm[this.date.getMonth()].selected =true; 
//2009-03-03 添加,初始化时间的值 
ch[this.hour].selected =true; 
cM[this.minute].selected =true; 
cs[this.second].selected =true; 
} 
//更新年、月 
Calendar.prototype.update = function (e){ 
this.year = e.calendarYear.options[e.calendarYear.selectedIndex].value;//2006-12-01 由寒羽枫修改 
this.month = e.calendarMonth.options[e.calendarMonth.selectedIndex].value; 
this.date = new Date(this.year, this.month, 1); 
//this.changeSelect(); 
this.bindData(); 
} 
//绑定数据到月视图 
Calendar.prototype.bindData = function () { 
var calendar = this; 
    if(calendar.DateMode >= 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 < tds.length; i++) { 
tds[i].style.backgroundColor = calendar.colors["td_bg_out"]; 
tds[i].onclick = function () {return;} 
tds[i].onmouseover = function () {return;} 
tds[i].onmouseout = function () {return;} 
if (i > dateArray.length - 1) break; 
tds[i].innerHTML = dateArray[i]; 
if (dateArray[i] != "&nbsp;"){ 
tds[i].bgColorTxt = "td_bg_out"; //2009-03-03 保存背景色的class 
var cur = new Date(); 
tds[i].isToday = false; 
if (cur.getFullYear() == calendar.date.getFullYear() && cur.getMonth() == calendar.date.getMonth() && cur.getDate() == dateArray[i]) { 
//是今天的单元格 
tds[i].style.backgroundColor = calendar.colors["cur_bg"]; 
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() && cur.getMonth() == calendar.date.getMonth()&& cur.getDate() == dateArray[i]) { 
//是已被选中的单元格 
calendar.selectedDayTD = tds[i]; 
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] = "&nbsp;"; 
} 
for (var i = 0; i < daysOfMonth; i++){ 
mvArray[i + dayOfFirstDay] = i + 1; 
} 
return mvArray; 
} 
//扩展 document.getElementById(id) 多浏览器兼容性 from meizz tree source 
Calendar.prototype.getElementById = function(id){ 
if (typeof(id) != "string" || id == "") return null; 
if (document.getElementById) return document.getElementById(id); 
if (document.all) return document.all(id); 
try {return eval(id);} catch(e){ return null;} 
} 
//扩展 object.getElementsByTagName(tagName) 
Calendar.prototype.getElementsByTagName = function(object, tagName){ 
if (document.getElementsByTagName) return document.getElementsByTagName(tagName); 
if (document.all) return document.all.tags(tagName); 
} 
//取得HTML控件绝对位置 
Calendar.prototype.getAbsPoint = function (e){ 
var x = e.offsetLeft; 
var y = e.offsetTop; 
while(e = e.offsetParent){ 
x += e.offsetLeft; 
y += e.offsetTop; 
} 
return {"x": x, "y": y}; 
} 
//显示日历 
Calendar.prototype.show = function (dateObj, popControl) { 
if (dateObj == null){ 
throw new Error("arguments[0] is necessary") 
} 
this.dateControl = dateObj; 
var now = new Date(); 
this.date = (dateObj.value.length > 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.changeEvent = this.dateControl.onchange;//将 onchange 转成其它函数,以免触发验证事件 
    this.dateControl.onchange = function() 
    {if(typeof(this.changeEvent) =='function'){this.changeEvent();}}*/ 
    if(this.dateControl.onblur != null){ 
    this.dateControl.blurEvent = this.dateControl.onblur;}//2007-09-14 保存主文本框的 onblur ,使其原本的事件不被覆盖 
    this.dateControl.onblur = function() 
    {calendar.onblur();if(typeof(this.blurEvent) =='function'){this.blurEvent();} 
    } 
} 
this.container.onmouseover = function(){isFocus=true;} 
this.container.onmouseout = function(){isFocus=false;} 
} 
//隐藏日历 
Calendar.prototype.hide = function() { 
//this.setDisplayStyle("select", "visible"); 
//this.panel.style.visibility = "hidden"; 
//this.container.style.visibility = "hidden"; 
this.panel.style.display = "none"; 
this.container.style.display = "none"; 
isFocus=false; 
} 
//焦点转移时隐藏日历 → 由寒羽枫 2006-06-25 添加 
Calendar.prototype.onblur = function() { 
if(!isFocus){this.hide();} 
} 
//以下由寒羽枫 2007-07-26 修改 → 确保日历容器节点在 body 最后,否则 FireFox 中不能出现在最上方 
function InitContainerPanel() //初始化容器 
{ 
    var str = '<div id="calendarPanel" style="position: absolute;display: none;z-index:9999; background-color: #FFFFFF;border: 1px solid #CCCCCC;width:175px;font-size:12px;"></div>'; 
    if(document.all) 
    { 
        str += '<iframe style="position:absolute;z-index:2000;width:expression(this.previousSibling.offsetWidth);'; 
        str += 'height:expression(this.previousSibling.offsetHeight);'; 
        str += 'left:expression(this.previousSibling.offsetLeft);top:expression(this.previousSibling.offsetTop);'; 
        str += 'display:expression(this.previousSibling.style.display);" scrolling="no" frameborder="no"></iframe>'; 
    } 
    var div = document.createElement("div"); 
    div.innerHTML = str; 
    div.id = "ContainerPanel"; 
    div.style.display ="none"; 
    document.body.appendChild(div); 
}//调用calendar.show(dateControl, popControl); 
//-->

将上述代码另存为 WebCalendar.js,页面调用代码
<!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 id="Head1"> 
        <script src="WebCalendar.js" type="text/javascript"></script> 
</head> 
<body> 
<form name="form1" method="post" action="WebForm1.aspx" id="form1"> 
<input type="text" value="" maxlength="100" id="Txt_CreateDateST01" onclick="SelectDate(this,'yyyy 年')" readonly="true" style="width:265px;cursor:pointer" /><br /> 
<input type="text" value="" maxlength="100" id="Txt_CreateDateST02" onclick="SelectDate(this,'yyyy 年 MM 月')" readonly="true" style="width:265px;cursor:pointer" /><br /> 
<input type="text" value="" maxlength="100" id="Txt_CreateDateST03" onclick="SelectDate(this,'yyyy\/MM\/dd')" readonly="true" style="width:265px;cursor:pointer" /><br /> 
<input type="text" value="" maxlength="100" id="Text1" onclick="SelectDate(this,'yyyy-MM-dd hh时')" readonly="true" style="width:265px;cursor:pointer" /><br /> 
<input type="text" value="" maxlength="100" id="Text3" onclick="SelectDate(this,'yyyy-MM-dd hh:mm')" readonly="true" style="width:265px;cursor:pointer" /><br /> 
<input type="text" value="" maxlength="100" id="Text4" onclick="SelectDate(this,'yyyy年MM月dd日 hh时mm分ss秒',0,-150)" readonly="true" style="width:265px;cursor:pointer" /><br /> 
</form> 
</body> 
</html>

调用方法:
1、传入对象:SelectDate(this,'yyyy 年')
2、传入 ID:SelectDateById('Txt_CreateDateST01','yyyy 年')
3、参数 SelectDate(this,'yyyy 年',0,-150)
格式(注意大小写):yyyy→年,MM→月,dd→天,hh→24小时制,mm→分钟,ss→秒
0 → 相对于文本框的横向偏移量
-150 → 相对于文本框的纵向偏移量
Javascript 相关文章推荐
Javascript操纵Cookie实现购物车程序
Feb 15 Javascript
javascript FormatNumber函数实现方法
Dec 30 Javascript
javascript中的if语句使用介绍
Nov 20 Javascript
使用js判断控件是否获得焦点
Jan 03 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
Feb 17 Javascript
JavaScript将字符串转换为整数的方法
Apr 14 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
Dec 24 Javascript
基于jquery实现省市区三级联动效果
Dec 25 Javascript
javascript实现移动端上的触屏拖拽功能
Mar 04 Javascript
Vue组件之极简的地址选择器的实现
May 31 Javascript
js实现开关灯效果
Mar 30 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
Sep 04 Javascript
javascript radio 联动效果
Mar 04 #Javascript
js 页面执行时间计算代码
Mar 04 #Javascript
[推荐]javascript 面向对象技术基础教程
Mar 03 #Javascript
ajax 文件上传应用简单实现
Mar 03 #Javascript
escape、encodeURI 和 encodeURIComponent 的区别
Mar 02 #Javascript
javascript 文档的编码问题解决
Mar 01 #Javascript
jQuery Div中加载其他页面的实现代码
Feb 27 #Javascript
You might like
php jquery 实现新闻标签分类与无刷新分页
2009/12/18 PHP
支持中文的php加密解密类代码
2011/11/27 PHP
基于php判断客户端类型
2016/10/14 PHP
深入理解JavaScript系列(4) 立即调用的函数表达式
2012/01/15 Javascript
jquery 隐藏与显示tr标签示例代码
2014/06/06 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
2015/08/03 Javascript
JQuery datepicker 用法详解
2015/12/25 Javascript
jQuery+ajax实现文章点赞功能的方法
2015/12/31 Javascript
JavaScript事件学习小结(三)js事件对象
2016/06/09 Javascript
老生常谈 js中this的指向
2016/06/30 Javascript
如何利用JQuery实现从底部回到顶部的功能
2016/12/27 Javascript
详解数组Array.sort()排序的方法
2020/05/09 Javascript
Mac系统下Webstorm快捷键整理大全
2017/05/28 Javascript
对mac下nodejs 更新到最新版本的最新方法(推荐)
2018/05/17 NodeJs
js中apply()和call()的区别与用法实例分析
2018/08/14 Javascript
Vue实现简单分页器
2018/12/29 Javascript
javascript原型链学习记录之继承实现方式分析
2019/05/01 Javascript
js通过循环多张图片实现动画效果
2019/12/19 Javascript
node.JS路径解析之PATH模块使用方法详解
2020/02/06 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
2020/08/11 Javascript
[01:14:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Orenda
2014/05/22 DOTA
[17:13]DOTA2 HEROS教学视频教你分分钟做大人-斯拉克
2014/06/13 DOTA
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
Pyqt5 实现跳转界面并关闭当前界面的方法
2019/06/19 Python
Python Opencv提取图片中某种颜色组成的图形的方法
2019/09/19 Python
pymysql 开启调试模式的实现
2019/09/24 Python
Java ExcutorService优雅关闭方式解析
2020/05/30 Python
Python实现钉钉/企业微信自动打卡的示例代码
2021/02/02 Python
省级四好少年事迹材料
2014/01/25 职场文书
数控专业大学毕业生职业规划范文
2014/02/06 职场文书
员工工作表现评语
2014/04/26 职场文书
安全生产工作汇报
2014/10/28 职场文书
资料员岗位职责
2015/02/10 职场文书
工商局调档介绍信
2015/10/22 职场文书
浅谈Python 中的复数问题
2021/05/19 Python
「天才王子的赤字国家重生术」妮妮姆·拉雷粘土人开订
2022/03/21 日漫