兼容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十个最常用的自定义函数(中文版)
Sep 07 Javascript
判断iframe是否加载完成的完美方法
Jan 07 Javascript
使用jquery实现div的tab切换实例代码
May 27 Javascript
JavaScript中getUTCMinutes()方法的使用详解
Jun 10 Javascript
浅析jQuery Mobile的初始化事件
Dec 03 Javascript
Node.js实用代码段之获取Buffer对象字节长度
Mar 17 Javascript
Vue实现双向绑定的方法
Dec 22 Javascript
React简单介绍
May 24 Javascript
基于JavaScript实现弹幕特效
Aug 27 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
Sep 30 Javascript
vue+element-ui实现表格编辑的三种实现方式
Oct 31 Javascript
JS函数节流和防抖之间的区分和实现详解
Jan 11 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
codeigniter使用技巧批量插入数据实例方法分享
2013/12/31 PHP
Zend Framework框架中实现Ajax的方法示例
2017/06/27 PHP
Laravel中如何轻松容易的输出完整的SQL语句
2020/07/26 PHP
JQuery.ajax传递中文参数的解决方法 推荐
2011/03/28 Javascript
谈谈我对JavaScript DOM事件的理解
2015/12/18 Javascript
jQuery获取table行数并输出单元格内容的实现方法
2016/06/30 Javascript
通过JS获取Request.QueryString()参数的值实现方法
2016/09/27 Javascript
jQuery学习笔记之入门
2016/12/14 Javascript
在vue-cli脚手架中配置一个vue-router前端路由
2017/07/03 Javascript
基于input框覆盖掉数字英文的实例讲解
2017/07/21 Javascript
vue 表单输入格式化中文输入法异常问题
2018/05/30 Javascript
vue拖拽排序插件vuedraggable使用方法详解
2020/08/21 Javascript
JavaScript ES2019中的8个新特性详解
2019/02/20 Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
2019/07/18 Javascript
AutoJs实现刷宝短视频的思路详解
2020/05/22 Javascript
[53:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第三场 1月18日
2021/03/11 DOTA
用Python解析XML的几种常见方法的介绍
2015/04/09 Python
Request的中断和ErrorHandler实例解析
2018/02/12 Python
python执行CMD指令,并获取返回的方法
2018/12/19 Python
Python获取航线信息并且制作成图的讲解
2019/01/03 Python
学生信息管理系统Python面向对象版
2019/01/30 Python
python实现登录密码重置简易操作代码
2019/08/14 Python
python GUI库图形界面开发之PyQt5信号与槽多窗口数据传递详细使用方法与实例
2020/03/08 Python
JetBrains PyCharm(Community版本)的下载、安装和初步使用图文教程详解
2020/03/19 Python
python实现简单学生信息管理系统
2020/04/09 Python
利用css3实现的简单的鼠标悬停按钮
2014/11/04 HTML / CSS
Html5实现首页动态视频背景的示例代码
2019/09/25 HTML / CSS
单位成立周年感言
2014/01/26 职场文书
店长职务说明书
2014/02/04 职场文书
迟到早退检讨书
2014/02/10 职场文书
《最大的麦穗》教学反思
2014/04/17 职场文书
病危通知单
2015/04/17 职场文书
公司财务制度:成本管理控制制度模板
2019/11/19 职场文书
python 算法题——快乐数的多种解法
2021/05/27 Python
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/07 PostgreSQL
Java 死锁解决方案
2022/05/11 Java/Android