js 写的日历组件...
时间：2010-08-06 来源：chenqqabcdchenqqabcd
/**
*本日历选择控件由tiannet根据前人经验完善而得。大部分代码来自meizz的日历控件。
*tiannet添加了时间选择功能、select,object标签隐藏功能，还有其它小功能。
*现经凌鹰雪影(chendy)修改，改变年月上下翻动位置，提示信息改为英文，改变样式，等等...
*
*使用方法：
* (1)只选择日期 <input type="text" name="date" readOnly onClick="setDay(this);">
* (2)选择日期和小时 <input type="text" name="dateh" readOnly onClick="setDayH(this);">
* (3)选择日期和小时及分钟 <input type="text" name="datehm" readOnly onClick="setDayHM(this);">
*设置参数的方法
* (1)设置日期分隔符 setDateSplit(strSplit);默认为"/"
* (2)设置日期与时间之间的分隔符 setDateTimeSplit(strSplit);默认为" "
* (3)设置时间分隔符 setTimeSplit(strSplit);默认为":"
* (4)设置(1),(2),(3)中的分隔符 setSplit(strDateSplit,strDateTimeSplit,strTimeSplit);
* (5)设置开始和结束年份 setYearPeriod(intDateBeg,intDateEnd)
*说明：
* 默认返回的日期时间格式如同：2009/07/16 08:08
*/
//------------------ 样式定义 ---------------------------//
//功能按钮同样样式
var s_chendy_turn_base = "font-size:7pt;color:white;border:0px solid #CCCCCC;cursor:hand;background-color:#2650A6;";
//翻年、月等的按钮
var s_chendy_turn = s_chendy_turn_base + "width:15px;font-family:webdings;font-size:9pt;padding-top:3px;";
//年选择下拉框
var s_chendy_select = "width:54px;display:none;";
//月、时、分选择下拉框
var s_chendy_select2 = "width:36px;display:none;";
//日期选择控件体的样式
var s_chendy_body = "width:190px;background-color:#2650A6;display:none;z-index:9998;position:absolute;" +
"border-left:1px solid #CCCCCC;border-top:1px solid #CCCCCC;border-right:1px solid #999999;border-bottom:1px solid #999999;";
//星期、日期表格的样式
var s_chendy_date ="width:100%;background-color:#fff;";
//显示日的td的样式
var s_chendy_day = "text-align:center;background-color:#fff;font-size:8pt;";
//年月时间字体样式
var s_chendy_font = "color:#fff;font-weight:bold;font-size:8pt;cursor:hand;";
//关闭、清空等按钮样式
var s_chendy_link = "text-decoration:none;font-size:9pt;color:#fff;vertical-align:middle;font-family:wingdings;";
//横线
var s_chendy_line = "border-bottom:1px solid #6699CC;clear:both;";
//------------------ 变量定义 ---------------------------//
var chendyYearSt = 1950;//可选择的开始年份
var chendyYearEnd = 2050;//可选择的结束年份
var chendyDateNow = new Date();
var chendyYear = chendyDateNow.getFullYear(); //定义年的变量的初始值
var chendyMonth = chendyDateNow.getMonth()+1; //定义月的变量的初始值
var chendyDay = chendyDateNow.getDate();
var chendyHour = chendyDateNow.getHours(); //定义小时的变量的初始值
var chendyMinute = chendyDateNow.getMinutes(); //定义分钟的变量的初始值
var chendyArrDay=new Array(42); //定义写日期的数组
var chendyDateSplit = "-"; //日期的分隔符号
var chendyDateTimeSplit = " "; //日期与时间之间的分隔符
var chendyTimeSplit = ":"; //时间的分隔符号
var chendyOutObject; //接收日期时间的对象
var arrchendyHide = new Array();//被强制隐藏的标签
var m_bolShowHour = false;//是否显示小时
var m_bolShowMinute = false;//是否显示分钟
var m_aMonHead = new Array(12); //定义阳历中每个月的最大天数
m_aMonHead[0] = 31; m_aMonHead[1] = 28; m_aMonHead[2] = 31; m_aMonHead[3] = 30; m_aMonHead[4] = 31; m_aMonHead[5] = 30;
m_aMonHead[6] = 31; m_aMonHead[7] = 31; m_aMonHead[8] = 30; m_aMonHead[9] = 31; m_aMonHead[10] = 30; m_aMonHead[11] = 31;
// ---------------------- 用户可调用的函数 -----------------------------//
//用户主调函数－只选择日期
function setDay(obj){
chendyOutObject = obj;
m_bolShowHour = false;
m_bolShowMinute = false;
//如果标签中有值，则将日期初始化为当前值
var strValue = chendyTrim(chendyOutObject.value);
if( strValue != "" ){
chendyInitDate(strValue);
}
chendyPopCalendar();
}
//用户主调函数－选择日期和小时
function setDayH(obj){
chendyOutObject = obj;
m_bolShowHour = true;
m_bolShowMinute = false;
//如果标签中有值，则将日期和小时初始化为当前值
var strValue = chendyTrim(chendyOutObject.value);
if( strValue != "" ){
chendyInitDate(strValue.substring(0,10));
var hour = strValue.substring(11,13);
if( hour < 10 ) chendyHour = hour.substring(1,2);
}
chendyPopCalendar();
}
//用户主调函数－选择日期和小时及分钟
function setDayHM(obj){
chendyOutObject = obj;
m_bolShowHour = true;
m_bolShowMinute = true;
//如果标签中有值，则将日期和小时及分钟初始化为当前值
var strValue = chendyTrim(chendyOutObject.value);
if( strValue != "" ){
chendyInitDate(strValue.substring(0,10));
var time = strValue.substring(11,16);
var arr = time.split(chendyTimeSplit);
chendyHour = arr[0];
chendyMinute = arr[1];
if( chendyHour < 10 ) chendyHour = chendyHour.substring(1,2);
if( chendyMinute < 10 ) chendyMinute = chendyMinute.substring(1,2);
}
chendyPopCalendar();
}
//设置开始日期和结束日期
function setYearPeriod(intDateBeg,intDateEnd){
chendyYearSt = intDateBeg;
chendyYearEnd = intDateEnd;
}
//设置日期分隔符。默认为"/"
function setDateSplit(strDateSplit){
chendyDateSplit = strDateSplit;
}
//设置日期与时间之间的分隔符。默认为" "
function setDateTimeSplit(strDateTimeSplit){
chendyDateTimeSplit = strDateTimeSplit;
}
//设置时间分隔符。默认为":"
function setTimeSplit(strTimeSplit){
chendyTimeSplit = strTimeSplit;
}
//设置分隔符
function setSplit(strDateSplit,strDateTimeSplit,strTimeSplit){
chendyDateSplit(strDateSplit);
chendyDateTimeSplit(strDateTimeSplit);
chendyTimeSplit(strTimeSplit);
}
//设置默认的日期。格式为：YYYY/MM/DD
function setDefaultDate(strDate){
chendyYear = strDate.substring(0,4);
chendyMonth = strDate.substring(5,7);
chendyDay = strDate.substring(8,10);
}
//设置默认的时间。格式为：HH24:MI
function setDefaultTime(strTime){
chendyHour = strTime.substring(0,2);
chendyMinute = strTime.substring(3,5);
}
//---------------------- end 用户可调用的函数 -----------------------------//
//------------------ begin 页面显示部分 ---------------------------//
var weekName = new Array("SUN","MON","TUE","WED","THU","FRI","SAT");
document.write('<div id="divchendyDate" style="'+s_chendy_body+'" style="font-family:verdana;" onselectstart="return false">');
document.write('<div style="border:solid 1px #fff;">');
//年月上翻下翻
document.write('<div style="float:left;"><input type="button" style="'+s_chendy_turn+'" title="Previous Year" value="7" onClick="chendyPrevYear();" /></div>');
document.write('<div style="float:left;"><input type="button" style="'+s_chendy_turn+'" title="Previous Month" value="3" onClick="chendyPrevMonth();" /></div>');
document.write('<div style="float:right;"><input type="button" style="'+s_chendy_turn+'" title="Next Year" value="8" onClick="chendyNextYear();" /></div>');
document.write('<div style="float:right;"><input type="button" style="'+s_chendy_turn+'" title="Next Month" value="4" onClick="chendyNextMonth();" /></div>');
//年月、时间修改
document.write('<div align="center" id="divchendyDateText" Author="chendy" style="padding-top:3px;vertical-align:bottom;">');
document.write('<span id="chendyYearHead" Author="chendy" style="'+s_chendy_font+'" '+
'onclick="spanYearCEvent();"> </span>');
document.write('<select id="selTianYear" style="'+s_chendy_select+'" Author="chendy" '+
' onChange="chendyYear=this.value;chendySetDay(chendyYear,chendyMonth);document.all.chendyYearHead.style.display=\'\';'+
'this.style.display=\'none\';">');
for(var i=chendyYearSt;i <= chendyYearEnd;i ++){
document.writeln('<option value="' + i + '">' + i + '</option>');
}
document.write('</select>');
document.write('<span id="chendyMonthHead" Author="chendy" style="'+s_chendy_font+'" '+
'onclick="spanMonthCEvent();"> </span>');
document.write('<select id="selTianMonth" style="'+s_chendy_select2+'" Author="chendy" '+
'onChange="chendyMonth=this.value;chendySetDay(chendyYear,chendyMonth);document.all.chendyMonthHead.style.display=\'\';'+
'this.style.display=\'none\';">');
for(var i=1;i <= 12;i ++){
document.writeln('<option value="' + i + '">' + i + '</option>');
}
document.write('</select>');
document.write('<span id="chendyHourHead" Author="chendy" style="'+s_chendy_font+'display:none;" '+
'onclick="spanHourCEvent();"> </span>');
document.write('<select id="selTianHour" style="'+s_chendy_select2+'display:none;" Author="chendy" '+
' onChange="chendyHour=this.value;chendyWriteHead();document.all.chendyHourHead.style.display=\'\';' +
'this.style.display=\'none\';">');
for(var i=0;i <= 23;i ++){
document.writeln('<option value="' + i + '">' + i + '</option>');
}
document.write('</select>');
document.write('<span id="chendyMinuteHead" Author="chendy" style="'+s_chendy_font+'display:none;" '+
'onclick="spanMinuteCEvent();"> </span>');
document.write('<select id="selTianMinute" style="'+s_chendy_select2+'display:none;" Author="chendy" '+
' onChange="chendyMinute=this.value;chendyWriteHead();document.all.chendyMinuteHead.style.display=\'\';'+
'this.style.display=\'none\';">');
for(var i=0;i <= 59;i ++){
document.writeln('<option value="' + i + '">' + i + '</option>');
}
document.write('</select>');
document.write('</div>');
//输出星期
document.write('<div style="'+s_chendy_line+'"></div>');
document.write('<table border=0 cellspacing=0 cellpadding=0 style="' + s_chendy_date + ' onselectstart="return false">');
document.write(' <tr style="background-color:#fff;color:white;" Author="chendy">');
for(var i =0;i < weekName.length;i ++){
if(i==0 || i==6)
document.write('<td style="padding-left:2px;padding-right:2px;color:#f00000;font-size:7pt;" align="center" Author="chendy">' + weekName[i] + '</td>');
else
document.write('<td style="padding-left:2px;padding-right:2px;color:#000;font-size:7pt;" align="center" Author="chendy">' + weekName[i] + '</td>');
}
document.write(' </tr>');
document.write('</table>');
document.write('<div style="'+s_chendy_line+'"></div>');
//输出天的选择
document.write('<table border=0 cellspacing=1 cellpadding=0 style="' + s_chendy_date + ' onselectstart="return false">');
var n = 0;
for (var i=0;i<5;i++) {
document.write (' <tr align=center id="trchendyDay' + i + '" >');
for (var j=0;j<7;j++){
document.write('<td align="center" id="tdchendyDay' + n + '" '+
'onClick="chendyDay=this.innerText;chendySetValue(true);" '
+' style="' + s_chendy_day + '"> </td>');
n ++;
}
document.write (' </tr>');
}
document.write (' <tr align=center id="trchendyDay5" >');
document.write('<td align="center" id="tdchendyDay35" onClick="chendyDay=this.innerText;chendySetValue(true);" '
+' style="' + s_chendy_day + '"> </td>');
document.write('<td align="center" id="tdchendyDay36" onClick="chendyDay=this.innerText;chendySetValue(true);" '
+' style="' + s_chendy_day + '"> </td>');
document.write('<td colspan="5"> </td></tr></table>');
//清空、今天、关闭等按钮的显示
document.write('<table cellspacing=0 cellpadding=0 width=100%><tr style="background:#2650a6;"><td align="right">'
+'<a href="javascript:chendyClear();" title="Clear" style="' + s_chendy_link + '">/</a> '
+'<a href="javascript:chendyToday();" style="font-family:webdings;" title="Today" style="' + s_chendy_link + '">q</a> '
+'<a href="javascript:chendyHideControl();" title="Close" style="' + s_chendy_link + '">x</a> '
+'</td></tr></table>');
document.write('</div>');
document.write('</div>');
//------------------ end 页面显示部分 ---------------------------//
//------------------ 显示日期时间的span标签响应事件 ---------------------------//
//单击年份span标签响应
function spanYearCEvent(){
hideElementsById(new Array("selTianYear","chendyMonthHead"),false);
if(m_bolShowHour) hideElementsById(new Array("chendyHourHead"),false);
if(m_bolShowMinute) hideElementsById(new Array("chendyMinuteHead"),false);
hideElementsById(new Array("chendyYearHead","selTianMonth","selTianHour","selTianMinute"),true);
}
//单击月份span标签响应
function spanMonthCEvent(){
hideElementsById(new Array("selTianMonth","chendyYearHead"),false);
if(m_bolShowHour) hideElementsById(new Array("chendyHourHead"),false);
if(m_bolShowMinute) hideElementsById(new Array("chendyMinuteHead"),false);
hideElementsById(new Array("chendyMonthHead","selTianYear","selTianHour","selTianMinute"),true);
}
//单击小时span标签响应
function spanHourCEvent(){
hideElementsById(new Array("chendyYearHead","chendyMonthHead"),false);
if(m_bolShowHour) hideElementsById(new Array("selTianHour"),false);
if(m_bolShowMinute) hideElementsById(new Array("chendyMinuteHead"),false);
hideElementsById(new Array("chendyHourHead","selTianYear","selTianMonth","selTianMinute"),true);
}
//单击分钟span标签响应
function spanMinuteCEvent(){
hideElementsById(new Array("chendyYearHead","chendyMonthHead"),false);
if(m_bolShowHour) hideElementsById(new Array("chendyHourHead"),false);
if(m_bolShowMinute) hideElementsById(new Array("selTianMinute"),false);
hideElementsById(new Array("chendyMinuteHead","selTianYear","selTianMonth","selTianHour"),true);
}
//根据标签id隐藏或显示标签
function hideElementsById(arrId,bolHide){
var strDisplay = "";
if(bolHide) strDisplay = "none";
for(var i = 0;i < arrId.length;i ++){
var obj = document.getElementById(arrId[i]);
obj.style.display = strDisplay;
}
}
//------------------ end 显示日期时间的span标签响应事件 ---------------------------//
//判断某年是否为闰年
function isPinYear(year){
var bolRet = false;
if (0==year%4&&((year%100!=0)||(year%400==0))) {
bolRet = true;
}
return bolRet;
}
//得到一个月的天数，闰年为29天
function getMonthCount(year,month){
var c=m_aMonHead[month-1];
if((month==2)&&isPinYear(year)) c++;
return c;
}
//重新设置当前的日。主要是防止在翻年、翻月时，当前日大于当月的最大日
function setRealDayCount() {
if( chendyDay > getMonthCount(chendyYear,chendyMonth) ) {
//如果当前的日大于当月的最大日，则取当月最大日
chendyDay = getMonthCount(chendyYear,chendyMonth);
}
}
//在个位数前加零
function addZero(value){
if(value < 10 ){
value = "0" + value;
}
return value;
}
//取出空格
function chendyTrim(str) {
return str.replace(/(^\s*)|(\s*$)/g,"");
}
//为select创建一个option，插入列表尾部
function createOption(objSelect,value,text){
var option = document.createElement("OPTION");
option.value = value;
option.text = text;
objSelect.options.add(option);
}
//为select创建一个option，插入列表头部
function createOption2(objSelect,value,text){
var option = document.createElement("OPTION");
objSelect.options.add(option);
for (var i = objSelect.options.length-1; i > 0; i--) {
objSelect.options[i].value = objSelect.options[i-1].value;
objSelect.options[i].text = objSelect.options[i-1].text;
}
objSelect.options[0].value = value;
objSelect.options[0].text = text;
}
//往前翻 Year
function chendyPrevYear() {
if(chendyYear > 999 && chendyYear <10000){chendyYear--;}
else{alert("Year must between 1000 to 9999！");}
chendySetDay(chendyYear,chendyMonth);
//如果年份小于允许的最小年份，则创建对应的option
if( chendyYear < chendyYearSt ) {
chendyYearSt = chendyYear;
createOption2(document.all.selTianYear,chendyYear,chendyYear);
}
checkSelect(document.all.selTianYear,chendyYear);
chendyWriteHead();
}
//往后翻 Year
function chendyNextYear() {
if(chendyYear > 999 && chendyYear <10000){chendyYear++;}
else{alert("Year must between 1000 to 9999！");return;}
chendySetDay(chendyYear,chendyMonth);
//如果年份超过允许的最大年份，则创建对应的option
if( chendyYear > chendyYearEnd ) {
chendyYearEnd = chendyYear;
createOption(document.all.selTianYear,chendyYear,chendyYear);
}
checkSelect(document.all.selTianYear,chendyYear);
chendyWriteHead();
}
//选择今天
function chendyToday() {
chendyYear = chendyDateNow.getFullYear();
chendyMonth = chendyDateNow.getMonth()+1;
chendyDay = chendyDateNow.getDate();
chendySetValue(true);
//chendySetDay(chendyYear,chendyMonth);
//selectObject();
}
//往前翻月份
function chendyPrevMonth() {
if(chendyMonth>1){chendyMonth--}else{chendyYear--;chendyMonth=12;}
chendySetDay(chendyYear,chendyMonth);
checkSelect(document.all.selTianMonth,chendyMonth);
chendyWriteHead();
}
//往后翻月份
function chendyNextMonth() {
if(chendyMonth==12){chendyYear++;chendyMonth=1}else{chendyMonth++}
chendySetDay(chendyYear,chendyMonth);
checkSelect(document.all.selTianMonth,chendyMonth);
chendyWriteHead();
}
//向span标签中写入年、月、时、分等数据
function chendyWriteHead(){
document.all.chendyYearHead.innerText = chendyYear + "-";
document.all.chendyMonthHead.innerText = chendyMonth + " ";
if( m_bolShowHour ) document.all.chendyHourHead.innerText = " "+chendyHour;
if( m_bolShowMinute ) document.all.chendyMinuteHead.innerText = ":" + chendyMinute + "";
chendySetValue(false);//给文本框赋值，但不隐藏本控件
}
//设置显示天
function chendySetDay(yy,mm) {
setRealDayCount();//设置当月真实的日
chendyWriteHead();
var strDateFont1 = "", strDateFont2 = "" //处理日期显示的风格
for (var i = 0; i < 37; i++){chendyArrDay[i]=""}; //将显示框的内容全部清空
var day1 = 1;
var firstday = new Date(yy,mm-1,1).getDay(); //某月第一天的星期几
for (var i = firstday; day1 < getMonthCount(yy,mm)+1; i++){
chendyArrDay[i]=day1;day1++;
}
//如果用于显示日的最后一行的第一个单元格的值为空，则隐藏整行。
//if(chendyArrDay[35] == ""){
// document.all.trchendyDay5.style.display = "none";
//} else {
// document.all.trchendyDay5.style.display = "";
//}
for (var i = 0; i < 37; i++){
var da = eval("document.all.tdchendyDay"+i) //书写新的一个月的日期星期排列
if (chendyArrDay[i]!="") {
//判断是否为周末，如果是周末，则改为红色字体
if(i % 7 == 0 || (i+1) % 7 == 0){
strDateFont1 = "<font color=#f0000>"
strDateFont2 = "</font>"
} else {
strDateFont1 = "";
strDateFont2 = ""
}
da.innerHTML = strDateFont1 + chendyArrDay[i] + strDateFont2;
//如果是当前选择的天，则改变颜色
if(chendyArrDay[i] == chendyDay ) {
da.style.backgroundColor = "#CCCCCC";
}
//如果是当天，则改变颜色
else if(chendyYear == chendyDateNow.getFullYear() && chendyMonth == (chendyDateNow.getMonth()+1) && chendyArrDay[i] == chendyDateNow.getDate()){
da.style.backgroundColor = "yellow";
da.title = "Today";
} else {
da.style.backgroundColor = "#fff";
}
da.style.cursor="hand"
} else {
da.innerHTML="";da.style.backgroundColor="";da.style.cursor="default"
}
}
chendySetValue(false);//给文本框赋值，但不隐藏本控件
}
//根据option的值选中option
function checkSelect(objSelect,selectValue) {
var count = parseInt(objSelect.length);
if( selectValue < 10 && selectValue.toString().length == 2) {
selectValue = selectValue.substring(1,2);
}
for(var i = 0;i < count;i ++){
if(objSelect.options[i].value == selectValue){
objSelect.selectedIndex = i;
break;
}
}
}
//选中年、月、时、分等下拉框
function selectObject(){
//如果年份小于允许的最小年份，则创建对应的option
if( chendyYear < chendyYearSt ) {
for( var i = chendyYear;i < chendyYearSt;i ++ ){
createOption(document.all.selTianYear,i,i);
}
chendyYearSt = chendyYear;
}
//如果年份超过允许的最大年份，则创建对应的option
if( chendyYear > chendyYearEnd ) {
for( var i = chendyYearEnd+1;i <= chendyYear;i ++ ){
createOption(document.all.selTianYear,i,i);
}
chendyYearEnd = chendyYear;
}
checkSelect(document.all.selTianYear,chendyYear);
checkSelect(document.all.selTianMonth,chendyMonth);
if( m_bolShowHour ) checkSelect(document.all.selTianHour,chendyHour);
if( m_bolShowMinute ) checkSelect(document.all.selTianMinute,chendyMinute);
}
//给接受日期时间的控件赋值
//参数bolHideControl - 是否隐藏控件
function chendySetValue(bolHideControl){
var value = "";
if( !chendyDay || chendyDay == "" ){
chendyOutObject.value = value;
return;
}
var mm = chendyMonth;
var day = chendyDay;
if( mm < 10 && mm.toString().length == 1) mm = "0" + mm;
if( day < 10 && day.toString().length == 1) day = "0" + day;
value = chendyYear + chendyDateSplit + mm + chendyDateSplit + day;
if( m_bolShowHour ){
var hour = chendyHour;
if( hour < 10 && hour.toString().length == 1 ) hour = "0" + hour;
value += chendyDateTimeSplit + hour;
}
if( m_bolShowMinute ){
var minute = chendyMinute;
if( minute < 10 && minute.toString().length == 1 ) minute = "0" + minute;
value += chendyTimeSplit + minute;
}
chendyOutObject.value = value;
//document.all.divchendyDate.style.display = "none";
if( bolHideControl ) {
chendyHideControl();
}
}
//是否显示时间
function showTime(){
if( !m_bolShowHour && m_bolShowMinute){
alert("Do select hour before select minute!");
return;
}
hideElementsById(new Array("chendyHourHead","selTianHour","chendyMinuteHead","selTianMinute"),true);
if( m_bolShowHour ){
//显示小时
hideElementsById(new Array("chendyHourHead"),false);
}
if( m_bolShowMinute ){
//显示分钟
hideElementsById(new Array("chendyMinuteHead"),false);
}
}
//弹出显示日历选择控件，以让用户选择
function chendyPopCalendar(){
//隐藏下拉框，显示相对应的head
hideElementsById(new Array("selTianYear","selTianMonth","selTianHour","selTianMinute"),true);
hideElementsById(new Array("chendyYearHead","chendyMonthHead","chendyHourHead","chendyMinuteHead"),false);
chendySetDay(chendyYear,chendyMonth);
chendyWriteHead();
showTime();
var dads = document.all.divchendyDate.style;
var iX, iY;
var h = document.all.divchendyDate.offsetHeight;
var w = document.all.divchendyDate.offsetWidth;
//计算left
if (window.event.x + h > document.body.offsetWidth - 10)
iX = window.event.x - h - 5 ;
else
iX = window.event.x + 5;
if (iX <0)
iX=0;
//计算top
iY = window.event.y;
if (window.event.y + w > document.body.offsetHeight - 10 )
iY = document.body.scrollTop + document.body.offsetHeight - w - 5 ;
else
iY = document.body.scrollTop +window.event.y + 5;
if (iY <0)
iY=0;
dads.left = iX;
dads.top = iY;
chendyShowControl();
selectObject();
}
//隐藏日历控件(同时显示被强制隐藏的标签)
function chendyHideControl(){
document.all.divchendyDate.style.display = "none";
chendyShowObject();
arrchendyHide = new Array();//将被隐藏的标签对象清空
}
//显示日历控件(同时隐藏会遮挡的标签)
function chendyShowControl(){
document.all.divchendyDate.style.display = "";
chendyHideObject("SELECT");
chendyHideObject("OBJECT");
}
//根据标签名称隐藏标签。如会遮住控件的select，object
function chendyHideObject(strTagName) {
x = document.all.divchendyDate.offsetLeft;
y = document.all.divchendyDate.offsetTop;
h = document.all.divchendyDate.offsetHeight;
w = document.all.divchendyDate.offsetWidth;
for (var i = 0; i < document.all.tags(strTagName).length; i++){
var obj = document.all.tags(strTagName)[i];
if (! obj || ! obj.offsetParent)
continue;
// 获取元素对于BODY标记的相对坐标
var objLeft = obj.offsetLeft;
var objTop = obj.offsetTop;
var objHeight = obj.offsetHeight;
var objWidth = obj.offsetWidth;
var objParent = obj.offsetParent;
while (objParent && objParent.tagName.toUpperCase() != "BODY"){
objLeft += objParent.offsetLeft;
objTop += objParent.offsetTop;
objParent = objParent.offsetParent;
}
//alert("控件左端:" + x + "select左端" + (objLeft + objWidth) + "控件底部:" + (y+h) + "select高:" + objTop);
var bolHide = true;
if( obj.style.display == "none" || obj.style.visibility == "hidden" || obj.getAttribute("Author") == "chendy" ){
//如果标签本身就是隐藏的，则不需要再隐藏。如果是控件中的下拉框，也不用隐藏。
bolHide = false;
}
if( ( (objLeft + objWidth) > x && (y + h + 20) > objTop && (objTop+objHeight) > y && objLeft < (x+w) ) && bolHide ){
//arrchendyHide.push(obj);//记录被隐藏的标签对象
arrchendyHide[arrchendyHide.length] = obj;
obj.style.visibility = "hidden";
}
}
}
//显示被隐藏的标签
function chendyShowObject(){
for(var i = 0;i < arrchendyHide.length;i ++){
//alert(arrchendyHide[i]);
arrchendyHide[i].style.visibility = "";
}
}
//初始化日期。
function chendyInitDate(strDate){
var arr = strDate.split(chendyDateSplit);
chendyYear = arr[0];
chendyMonth = arr[1];
chendyDay = arr[2];
}
//清空
function chendyClear(){
chendyOutObject.value = "";
chendyHideControl();
}
//任意点击时关闭该控件
function document.onclick(){
with(window.event.srcElement){
if (tagName != "INPUT" && getAttribute("Author") != "chendy")
chendyHideControl();
}
}
//按ESC键关闭该控件
function document.onkeypress(){
if( event.keyCode == 27 ){
chendyHideControl();
}
}
相关阅读 更多 +
