兼容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 相关文章推荐
js实现addClass,removeClass,hasClass的函数代码
Jul 13 Javascript
详解JavaScript语言的基本语法要求
Nov 20 Javascript
浅析AngularJS Filter用法
Dec 28 Javascript
Javascript基础_嵌入图像的简单实现
Jun 14 Javascript
极力推荐10个短小实用的JavaScript代码段
Aug 03 Javascript
Bootstrap框架的学习教程详解(二)
Oct 18 Javascript
微信小程序 动画的简单实例
Oct 12 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
Apr 11 Javascript
JavaScript Reflect Metadata实现详解
Dec 12 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
May 12 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
Sep 07 Javascript
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
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
西德产收音机
2021/03/01 无线电
咖啡因含量是由谁决定的?低因咖啡怎么来?低因咖啡适合什么人喝
2021/03/06 新手入门
php.ini save_handler 修改不生效的解决办法
2014/07/22 PHP
jQuery实现切换页面布局使用介绍
2011/10/09 Javascript
javascript之bind使用介绍
2011/10/09 Javascript
浅谈Javascript事件模拟
2012/06/27 Javascript
JS倒计时代码汇总
2014/11/25 Javascript
js数组的操作指南
2014/12/28 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
2015/10/28 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
2016/05/23 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
2016/07/05 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
2016/11/07 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
2016/11/18 Javascript
node.js爬虫爬取拉勾网职位信息
2017/03/14 Javascript
jquery 校验中国身份证号码实例详解
2017/04/11 jQuery
微信小程序开发之好友列表字母列表跳转对应位置
2017/09/26 Javascript
使vue实现jQuery调用的两种方法
2019/05/12 jQuery
如何使用Jquery动态生成二级选项列表
2020/02/06 jQuery
vue 实现element-ui中的加载中状态
2020/11/11 Javascript
[42:32]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第二场 10.28
2020/10/28 DOTA
python增加矩阵维度的实例讲解
2018/04/04 Python
对python程序内存泄漏调试的记录
2018/06/11 Python
利用Python实现手机短信监控通知的方法
2019/07/22 Python
Python 依赖库太多了该如何管理
2019/11/08 Python
django框架使用views.py的函数对表进行增删改查内容操作详解【models.py中表的创建、views.py中函数的使用,基于对象的跨表查询】
2019/12/12 Python
python基于plotly实现画饼状图代码实例
2019/12/16 Python
在notepad++中实现直接运行python代码
2019/12/18 Python
Python 实现一行输入多个数字(用空格隔开)
2020/04/29 Python
Python代码覆盖率统计工具coverage.py用法详解
2020/11/25 Python
be2台湾单身男女交友:全球网路婚姻介绍的领导品牌
2019/10/11 全球购物
飞利浦美国官网:Philips美国
2020/02/28 全球购物
Android面试宝典
2013/08/06 面试题
篮球社团活动总结
2014/06/27 职场文书
四风问题个人自查剖析材料思想汇报
2014/09/21 职场文书
商家认证委托书格式
2014/10/16 职场文书
文明单位汇报材料
2014/12/24 职场文书