兼容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 相关文章推荐
15 个 JavaScript Web UI 库
May 19 Javascript
基于Asp.net与Javascript控制的日期控件
May 22 Javascript
麻雀虽小五脏俱全 Dojo自定义控件应用
Sep 04 Javascript
JSP基于Bootstrap分页显示实例解析
Jun 12 Javascript
javascript中this关键字详解
Dec 12 Javascript
原生js实现打字动画游戏
Feb 04 Javascript
vue 运用mock数据的示例代码
Nov 07 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
Dec 01 Javascript
React数据传递之组件内部通信的方法
Dec 31 Javascript
layui复选框限制选择个数的方法
Sep 18 Javascript
解决axios post 后端无法接收数据的问题
Oct 29 Javascript
element多个表单校验的实现
May 27 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
超强分页类2.0发布,支持自定义风格,默认4种显示模式
2007/01/02 PHP
用PHP 快速生成 Flash 动画的方法
2007/03/06 PHP
攻克CakePHP系列二 表单数据显示
2008/10/22 PHP
[原创]PHP实现逐行删除文件右侧空格的方法
2015/12/25 PHP
php格式化时间戳
2016/12/17 PHP
一个非常实用的php文件上传类
2017/07/04 PHP
laravel中的fillable和guarded属性详解
2019/10/23 PHP
基于jquery的图片懒加载js
2010/06/30 Javascript
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
2011/08/09 Javascript
各种常用的JS函数整理
2013/10/25 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
2016/09/17 Javascript
纯JS实现简单的日历
2017/06/26 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
2017/09/12 Javascript
vue 设置路由的登录权限的方法
2018/07/03 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
2019/01/18 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
2019/12/30 Javascript
jquery将信息遍历到界面上实例代码
2020/01/21 jQuery
JS操作Fckeditor的一些常用方法(获取、插入等)
2020/02/19 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
2020/11/09 Javascript
Python使用googletrans报错的解决方法
2018/09/25 Python
利用python修改json文件的value方法
2018/12/31 Python
对django2.0 关联表的必填on_delete参数的含义解析
2019/08/09 Python
PYTHON如何读取和写入EXCEL里面的数据
2019/10/28 Python
Python csv文件的读写操作实例详解
2019/11/19 Python
python实现ftp文件传输功能
2020/03/20 Python
Django框架配置mysql数据库实现过程
2020/04/22 Python
Python图像识别+KNN求解数独的实现
2020/11/13 Python
意大利专业化妆品品牌:KIKO MILANO
2017/02/01 全球购物
英国儿童设计师服装和玩具购物网站:Zac & Lulu
2020/10/19 全球购物
白血病捐款倡议书
2014/05/14 职场文书
四川省传达学习贯彻党的群众路线教育实践活动总结大会精神新闻稿
2014/10/26 职场文书
领导干部“四风”查摆问题个人整改措施
2014/10/28 职场文书
餐饮行业关注的9大营销策略
2019/08/26 职场文书
python函数指定默认值的实例讲解
2021/03/29 Python
高端收音机+蓝牙音箱,JBL TUNER FM带收音蓝牙音箱评测
2021/04/24 无线电
英国数字版游戏销量周榜公布 《小缇娜的奇幻之地》登顶
2022/04/03 其他游戏