一个Popup的日历控件

最新推荐文章于 2022-02-18 13:54:56 发布

liangxf0022

最新推荐文章于 2022-02-18 13:54:56 发布

阅读量1.4k

点赞数

文章标签：日历 function date border null calendar

本文链接：https://blog.csdn.net/liangxf0022/article/details/1350155

版权

我在使用Meizz的日历控件的时候，有时候会有一些问题。就是在一个很狭窄的Frame中使用，往往弹出以后只看到上面的标题，下面的日历都看不到了。所以，本人在Meizz的日历基础上修改，改用createPopup窗口，取消了一些功能，不对的地方还请大家指出。

document.write( " <div id=meizzCalendarLayer style='position: absolute; z-index: 9999; width: 144; height: 193; display: none'> " );

document.write( " <iframe name=meizzCalendarIframe scrolling=no frameborder=0 width=100% height=100%></iframe></div> " );

var cPopup = window.createPopup();

cPopup.document.createStyleSheet( ' a.css ' );

function writeIframe()

...

function TWebCalendar() // 初始化日历的设置

{

this.regInfo = "点击关闭按钮关闭日期选择器！";

// this.regInfo = "WEB Calendar 3.0作者：meizz(梅花雪疏影横斜)网站：http://www.meizz.com/关闭的快捷键：[Esc]";

// this.regInfo += "Ver 2.0：walkingpoison(水晶龙)Ver 1.0：meizz(梅花雪疏影横斜)";

this.daysMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);

this.day = new Array(39); //定义日历展示用的数组

this.dayObj = new Array(39); //定义日期展示控件数组

this.dateStyle = null; //保存格式化后日期数组

this.objExport = null; //日历回传的显示控件

this.eventSrc = null; //日历显示的触发控件

this.inputDate = null; //转化外的输入的日期(d/m/yyyy)

this.thisYear = new Date().getFullYear(); //定义年的变量的初始值

this.thisMonth = new Date().getMonth()+ 1; //定义月的变量的初始值

this.thisDay = new Date().getDate(); //定义日的变量的初始值

this.today = this.thisDay +"/"+ this.thisMonth +"/"+ this.thisYear; //今天(d/m/yyyy)

this.iframe = window.frames("meizzCalendarIframe"); //日历的 iframe 载体

this.calendar = getObjectById("meizzCalendarLayer"); //日历的层

this.dateReg = ""; //日历格式验证的正则式

this.yearFall = 50; //定义年下拉框的年差值

this.format = "yyyy-mm-dd"; //回传日期的格式

this.timeShow = false; //是否返回时间

this.drag = false; //是否允许拖动

this.darkColor = "#6BBFD9"; //控件的暗色

this.lightColor = "#FFFFFF"; //控件的亮色

this.btnBgColor = "#FFFFF5"; //控件的按钮背景色

this.wordColor = "#000080"; //控件的文字颜色

this.wordDark = "#DCDCDC"; //控件的暗文字颜色

this.dayBgColor = "#DEEAF6"; //日期数字背景色

this.todayColor = "#FF0000"; //今天在日历上的标示背景色

this.DarkBorder = "#D4D0C8"; //日期显示的立体表达色

} var WebCalendar = new TWebCalendar();

function calendar() // 主调函数

{

var e = window.event.srcElement; writeIframe();

var o = WebCalendar.calendar.style; WebCalendar.eventSrc = e;

if (arguments.length == 0) WebCalendar.objExport = e;

else WebCalendar.objExport = eval(arguments[0]);

WebCalendar.iframe.tableWeek.style.cursor = WebCalendar.drag ? "move" : "default";

var t = e.offsetTop, h = e.clientHeight, l = e.offsetLeft, p = e.type;

while (e = e.offsetParent){t += e.offsetTop; l += e.offsetLeft;}

//o.display = "";

//WebCalendar.iframe.document.body.focus();

//alert('l :' + l + ',t :'+t + ' h :' + h);

//alert('A');

var cw = WebCalendar.calendar.clientWidth, ch = WebCalendar.calendar.clientHeight;

var dw = document.body.clientWidth, dl = document.body.scrollLeft, dt = document.body.scrollTop;

var top = 0;

var left = 0;

if (document.body.clientHeight + dt - t - h >= ch) top = (p=="image")? t + h - dt : t + h - dt + 6;

else top = (t - dt < ch) ? ((p=="image")? t + h : t + h + 6) : t - ch;

if (dw + dl - l >= cw) left = l - dl; else left = (dw >= cw) ? dw - cw + dl : dl;

cPopup.show(left + 2, top, 146, 192, document.body);

if (!WebCalendar.timeShow) WebCalendar.dateReg = /^(d{1,4})(-|/|.)(d{1,2})2(d{1,2})$/;

else WebCalendar.dateReg = /^(d{1,4})(-|/|.)(d{1,2})2(d{1,2}) (d{1,2}):(d{1,2}):(d{1,2})$/;

try{

if (WebCalendar.objExport.value.trim() != ""){

WebCalendar.dateStyle = WebCalendar.objExport.value.trim().match(WebCalendar.dateReg);

if (WebCalendar.dateStyle == null)

{

WebCalendar.thisYear = new Date().getFullYear();

WebCalendar.thisMonth = new Date().getMonth()+ 1;

WebCalendar.thisDay = new Date().getDate();

alert("原文本框里的日期有错误！可能与你定义的显示时分秒有冲突！");

writeCalendar(); return false;

}

else

{

WebCalendar.thisYear = parseInt(WebCalendar.dateStyle[1], 10);

WebCalendar.thisMonth = parseInt(WebCalendar.dateStyle[3], 10);

WebCalendar.thisDay = parseInt(WebCalendar.dateStyle[4], 10);

WebCalendar.inputDate = parseInt(WebCalendar.thisDay, 10) +"/"+ parseInt(WebCalendar.thisMonth, 10) +"/"+

parseInt(WebCalendar.thisYear, 10); writeCalendar();

}

} else writeCalendar();

} catch(e){writeCalendar();}

}

function funMonthSelect() // 月份的下拉框

{ /**

var m = isNaN(parseInt(WebCalendar.thisMonth, 10)) ? new Date().getMonth() + 1 : parseInt(WebCalendar.thisMonth);

var e = this.cPopup.document.forms[0].tmpMonthSelect;

//alert(e.outerHTML);

e.style.display = "";

e.options.add(new Option('1月', 1));

for (var i=1; i<13; i++)

{

//alert(ops);

alert(e.options);

e.options.add(new Option('1月'));

}

e.value = m; e.focus(); window.status = e.style.top;

}

function funYearSelect() // 年份的下拉框

{

var n = WebCalendar.yearFall;

var e = WebCalendar.iframe.document.forms[0].tmpYearSelect;

var y = isNaN(parseInt(WebCalendar.thisYear, 10)) ? new Date().getFullYear() : parseInt(WebCalendar.thisYear);

y = (y <= 1000)? 1000 : ((y >= 9999)? 9999 : y);

var min = (y - n >= 1000) ? y - n : 1000;

var max = (y + n <= 9999) ? y + n : 9999;

min = (max == 9999) ? max-n*2 : min;

max = (min == 1000) ? min+n*2 : max;

for (var i=min; i<=max; i++)

{

//alert(e.options.length);

e.options[e.options.length] = new Option(i +"年", i+"", true, true);//e.options.add(new Option(i +"年", i));

}

e.style.display = "";

e.value = y; e.focus();

}

function prevM() // 往前翻月份

{

WebCalendar.thisDay = 1;

if (WebCalendar.thisMonth==1)

{

WebCalendar.thisYear--;

WebCalendar.thisMonth=13;

}

WebCalendar.thisMonth--; writeCalendar();

}

function nextM() // 往后翻月份

{

WebCalendar.thisDay = 1;

if (WebCalendar.thisMonth==12)

{

WebCalendar.thisYear++;

WebCalendar.thisMonth=0;

}

WebCalendar.thisMonth++; writeCalendar();

}

function prevY() {WebCalendar.thisDay = 1; WebCalendar.thisYear--; writeCalendar();} // 往前翻 Year

function nextY() {WebCalendar.thisDay = 1; WebCalendar.thisYear++; writeCalendar();} // 往后翻 Year

function hiddenSelect(e) {for(var i=e.options.length; i>-1; i--)e.options.remove(i); e.style.display="none";}

function getObjectById(id) { if(document.all) return(eval("document.all."+ id)); return(eval(id)); }

// function hiddenCalendar(){getObjectById("meizzCalendarLayer").style.display = "none";};

function hiddenCalendar() {this.cPopup.hide();}

function appendZero(n) {return(("00"+ n).substr(("00"+ n).length-2));} // 日期自动补零程序

function String.prototype.trim() {return this.replace(/(^s*)|(s*$)/g,"");}

function dayMouseOver()

{

this.className = "over";

this.style.backgroundColor = WebCalendar.darkColor;

if(WebCalendar.day[this.id.substr(8)].split("/")[1] == WebCalendar.thisMonth)

this.style.color = WebCalendar.lightColor;

}

function dayMouseOut()

{

this.className = "out"; var d = WebCalendar.day[this.id.substr(8)], a = d.split("/");

this.style.removeAttribute('backgroundColor');

if(a[1] == WebCalendar.thisMonth && d != WebCalendar.today)

{

if(WebCalendar.dateStyle && a[0] == parseInt(WebCalendar.dateStyle[4], 10))

this.style.color = WebCalendar.lightColor;

this.style.color = WebCalendar.wordColor;

}

function writeCalendar() // 对日历显示的数据的处理程序

{

var y = WebCalendar.thisYear;

var m = WebCalendar.thisMonth;

var d = WebCalendar.thisDay;

//alert('y :' + y + ', m :' + m + ', d :' + d);

WebCalendar.daysMonth[1] = (0==y%4 && (y%100!=0 || y%400==0)) ? 29 : 28;

if (!(y<=9999 && y >= 1000 && parseInt(m, 10)>0 && parseInt(m, 10)<13 && parseInt(d, 10)>0)){

alert("对不起，你输入了错误的日期！");

WebCalendar.thisYear = new Date().getFullYear();

WebCalendar.thisMonth = new Date().getMonth()+ 1;

WebCalendar.thisDay = new Date().getDate(); }

y = WebCalendar.thisYear;

m = WebCalendar.thisMonth;

d = WebCalendar.thisDay;

//alert(this.cPopup.document.body.all.meizzYearHead);

this.cPopup.document.body.all.meizzYearHead.innerText = y +" 年";

this.cPopup.document.body.all.meizzYearMonth.innerText = parseInt(m, 10) +" 月";

WebCalendar.iframe.meizzYearHead.innerText = y +" 年";

WebCalendar.iframe.meizzYearMonth.innerText = parseInt(m, 10) +" 月";

WebCalendar.daysMonth[1] = (0==y%4 && (y%100!=0 || y%400==0)) ? 29 : 28; //闰年二月为29天

var w = new Date(y, m-1, 1).getDay();

var prevDays = m==1 ? WebCalendar.daysMonth[11] : WebCalendar.daysMonth[m-2];

for(var i=(w-1); i>=0; i--) //这三个 for 循环为日历赋数据源（数组 WebCalendar.day）格式是 d/m/yyyy

{

WebCalendar.day[i] = prevDays +"/"+ (parseInt(m, 10)-1) +"/"+ y;

if(m==1) WebCalendar.day[i] = prevDays +"/"+ 12 +"/"+ (parseInt(y, 10)-1);

prevDays--;

}

for(var i=1; i<=WebCalendar.daysMonth[m-1]; i++)

{

// alert(i);

WebCalendar.day[i+w-1] = i +"/"+ m +"/"+ y;

}

for(var i=1; i<39-w-WebCalendar.daysMonth[m-1]+1; i++)

{

// alert('g' + i);

WebCalendar.day[WebCalendar.daysMonth[m-1]+w-1+i] = i +"/"+ (parseInt(m, 10)+1) +"/"+ y;

if(m==12) WebCalendar.day[WebCalendar.daysMonth[m-1]+w-1+i] = i +"/"+ 1 +"/"+ (parseInt(y, 10)+1);

}

for(var i=0; i<39; i++) //这个循环是根据源数组写到日历里显示

{

var a = WebCalendar.day[i].split("/");

//alert('webCalendar.dayObj' + WebCalendar.dayObj[i].name);

WebCalendar.dayObj[i].innerText = a[0];

WebCalendar.dayObj[i].title = a[2] +"-"+ appendZero(a[1]) +"-"+ appendZero(a[0]);

WebCalendar.dayObj[i].bgColor = WebCalendar.dayBgColor;

WebCalendar.dayObj[i].style.color = WebCalendar.wordColor;

if ((i<10 && parseInt(WebCalendar.day[i], 10)>20) || (i>27 && parseInt(WebCalendar.day[i], 10)<12))

WebCalendar.dayObj[i].style.color = WebCalendar.wordDark;

if (WebCalendar.inputDate==WebCalendar.day[i]) //设置输入框里的日期在日历上的颜色

{WebCalendar.dayObj[i].bgColor = WebCalendar.darkColor; WebCalendar.dayObj[i].style.color = WebCalendar.lightColor;}

if (WebCalendar.day[i] == WebCalendar.today) //设置今天在日历上反应出来的颜色

{WebCalendar.dayObj[i].bgColor = WebCalendar.todayColor; WebCalendar.dayObj[i].style.color = WebCalendar.lightColor;}

}

function returnDate() // 根据日期格式等返回用户选定的日期

{

if(WebCalendar.objExport)

{

var returnValue;

var a = (arguments.length==0) ? WebCalendar.day[this.id.substr(8)].split("/") : arguments[0].split("/");

var d = WebCalendar.format.match(/^(w{4})(-|/|.|)(w{1,2})2(w{1,2})$/);

if(d==null){alert("你设定的日期输出格式不对！请重新定义 WebCalendar.format ！"); return false;}

var flag = d[3].length==2 || d[4].length==2; //判断返回的日期格式是否要补零

returnValue = flag ? a[2] +d[2]+ appendZero(a[1]) +d[2]+ appendZero(a[0]) : a[2] +d[2]+ a[1] +d[2]+ a[0];

if(WebCalendar.timeShow)

{

var h = new Date().getHours(), m = new Date().getMinutes(), s = new Date().getSeconds();

returnValue += flag ? " "+ appendZero(h) +":"+ appendZero(m) +":"+ appendZero(s) : " "+ h +":"+ m +":"+ s;

}

WebCalendar.objExport.value = returnValue;

hiddenCalendar();

}

function document.onclick()

{

if(WebCalendar.eventSrc != window.event.srcElement) hiddenCalendar();

}

另外还有一个css文件

{

font-size: 12px;

font-family: 宋体;

}

.bg

{

color: #FFFFFF;

cursor: default;

background-color: #6BBFD9;

}

table#tableMain

{

width: 142;

height: 180;

}

table#tableWeek td

{

color: #FFFFFF;

}

table#tableDay td

{

font-weight: bold;

}

td#meizzYearHead, td#meizzYearMonth

{

color: #000080;

}

.out

{

text-align: center;

border-top: 1px solid #D4D0C8;

border-left: 1px solid #D4D0C8;

border-right: 1px solid #FFFFFF;

border-bottom: 1px solid #FFFFFF;

}

.over

{

text-align: center;

border-top: 1px solid #FFFFFF;

border-left: 1px solid #FFFFFF;

border-bottom: 1px solid #D4D0C8;

border-right: 1px solid #D4D0C8;

}

input

{

border: 1px solid #6BBFD9;

padding-top: 1px;

height: 18;

cursor: hand;

color: #000080;

background-color: #FFFFF5;

}

liangxf0022

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个Popup的日历控件

我在使用Meizz的日历控件的时候，有时候会有一些问题。就是在一个很狭窄的Frame中使用，往往弹出以后只看到上面的标题，下面的日历都看不到了。所以，本人在Meizz的日历基础上修改，改用createPopup窗口，取消了一些功能，不对的地方还请大家指出。document.write("");document.write("");var cPopup = window.createPopu
复制链接

扫一扫