JS日期和时间选择控件升级版_javascript技巧_脚本之家

鉴于网上找到的几个日期选择程序有些问题,遂着手重写一个程序,大部分还是借鉴前人的代码,添加了时间选择功能,隐藏会遮挡控件的标签select,object。
开始本想使用window.createPopup()来弹出日历的选择,这样就可以跨过任何标签。
不过做到中途发现用createPopup窗口实现理论上是行不通的:
一是因为不在窗体里单击任何地方都会关闭窗口,而当用下拉框选择年份时,很有可能会单击到窗体外的地方,当然这个可以自己写select来避免,但是比较麻烦;
二是窗体的宽度和高度只能在弹出时设置,而显然,在选择不同年月时,控件高度是要发生改变的。
鉴于上面的原因,还是决定采用普通的处理方法。 Calendar.js: 复制代码 代码如下: /**
*本日历选择控件由tiannet根据前人经验完善而得。大部分代码来自meizz的日历控件。
*tiannet添加了时间选择功能、select,object标签隐藏功能,还有其它小功能。
*使用方法: * 只选择日期 *设置参数的方法 * 设置日期分隔符
setDateSplit;默认为”-” * 设置日期与时间之间的分隔符
setDateTimeSplit;默认为” ” * 设置时间分隔符 setTimeSplit;默认为”:” *
中的分隔符 setSplit(strDateSplit,strDateTimeSplit,strTimeSplit); *
设置开始和结束年份 setYearPeriod(intDateBeg,intDateEnd) *说明: *
默认返回的日期时间格式如同:2005-02-02 08:08 */ //——————
样式定义 —————————// //功能按钮同样样式 var
s_tiannet_turn_base = “height:16px;font-size:9pt;color:white;border:0
solid #CCCCCC;cursor:hand;background-color:#2650A6;”;
//翻年、月等的按钮 var s_tiannet_turn = “width:28px;” +
s_tiannet_turn_base; //关闭、清空等按钮样式 var s_tiannet_turn2 =
“width:22px;” + s_tiannet_turn_base; //年选择下拉框 var
s_tiannet_select = “width:64px;display:none;”; //月、时、分选择下拉框
var s_tiannet_select2 = “width:46px;display:none;”;
//日期选择控件体的样式 var s_tiannet_body =
“width:150;background-color:#2650A6;display:none;z-index:9998;position:absolute;”

  • “border-left:1 solid #CCCCCC;border-top:1 solid
    #CCCCCC;border-right:1 solid #999999;border-bottom:1 solid #999999;”;
    //显示日的td的样式 var s_tiannet_day =
    “width:21px;height:20px;background-color:#D8F0FC;font-size:10pt;”;
    //字体样式 var s_tiannet_font =
    “color:#FFCC00;font-size:9pt;cursor:hand;”; //链接的样式 var
    s_tiannet_link = “text-decoration:none;font-size:9pt;color:#2650A6;”;
    //横线 var s_tiannet_line = “border-bottom:1 solid #6699CC”;
    //—————— 变量定义 —————————// var
    tiannetYearSt = 1950;//可选择的开始年份 var tiannetYearEnd =
    2010;//可选择的结束年份 var tiannetDateNow = new Date(); var tiannetYear
    = tiannetDateNow.getFullYear(); //定义年的变量的初始值 var tiannetMonth
    = tiannetDateNow.getMonth()+1; //定义月的变量的初始值 var tiannetDay =
    tiannetDateNow.getDate(); var tiannetHour =
    8;//tiannetDateNow.getHours(); var tiannetMinute =
    0;//tiannetDateNow.getMinutes(); var tiannetArrDay=new Array;
    //定义写日期的数组 var tiannetDateSplit = “-“; //日期的分隔符号 var
    tiannetDateTimeSplit = ” “; //日期与时间之间的分隔符 var
    tiannetTimeSplit = “:”; //时间的分隔符号 var tiannetOutObject;
    //接收日期时间的对象 var arrTiannetHide = new Array();//被强制隐藏的标签
    var m_bolShowHour = false;//是否显示小时 var m_bolShowMinute =
    false;//是否显示分钟 var m_aMonHead = new Array;
    //定义阳历中每个月的最大天数 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{ tiannetOutObject = obj; //如果标签中有值,则将日期初始化为当前值
    var strValue = tiannetTrim(tiannetOutObject.value); if{ tiannetInitDate;
    } tiannetPopCalendar(); } //用户主调函数-选择日期和小时 function
    setDayH{ tiannetOutObject = obj; m_bolShowHour = true;
    //如果标签中有值,则将日期和小时初始化为当前值 var strValue =
    tiannetTrim(tiannetOutObject.value); if{
    tiannetInitDate(strValue.substring; var hour = strValue.substring; if
    tiannetHour = hour.substring; } tiannetPopCalendar(); }
    //用户主调函数-选择日期和小时及分钟 function setDayHM{ tiannetOutObject
    = obj; m_bolShowHour = true; m_bolShowMinute = true;
    //如果标签中有值,则将日期和小时及分钟初始化为当前值 var strValue =
    tiannetTrim(tiannetOutObject.value); if{
    tiannetInitDate(strValue.substring; var time = strValue.substring; var
    arr = time.split; tiannetHour = arr[0]; tiannetMinute = arr[1]; if
    tiannetHour = tiannetHour.substring; if tiannetMinute =
    tiannetMinute.substring; } tiannetPopCalendar(); }
    //设置开始日期和结束日期 function setYearPeriod(intDateBeg,intDateEnd){
    tiannetYearSt = intDateBeg; tiannetYearEnd = intDateEnd; }
    //设置日期分隔符。默认为”-” function setDateSplit{ tiannetDateSplit =
    strDateSplit; } //设置日期与时间之间的分隔符。默认为” ” function
    setDateTimeSplit{ tiannetDateTimeSplit = strDateTimeSplit; }
    //设置时间分隔符。默认为”:” function setTimeSplit{ tiannetTimeSplit =
    strTimeSplit; } //设置分隔符 function
    setSplit(strDateSplit,strDateTimeSplit,strTimeSplit){ tiannetDateSplit;
    tiannetDateTimeSplit; tiannetTimeSplit; }
    //设置默认的日期。格式为:YYYY-MM-DD function setDefaultDate{
    tiannetYear = strDate.substring; tiannetMonth = strDate.substring;
    tiannetDay = strDate.substring; } //设置默认的时间。格式为:HH24:MI
    function setDefaultTime{ tiannetHour = strTime.substring; tiannetMinute
    = strTime.substring; } // ———————- end 用户可调用的函数
    —————————–// //—————— begin 页面显示部分
    —————————// var weekName = new
    Array(“日”,”一”,”二”,”三”,”四”,”五”,”六”); document.write(‘

‘); document.write(‘

‘); document.write(”);
for(var i=tiannetYearSt;i <= tiannetYearEnd;i ++){
document.writeln(” + i + ‘年’); } document.write; document.write(”); for{
document.writeln(” + i + ‘月’); } document.write; //document.write;
//document.write(‘

‘); document.write(”);
for{ document.writeln(” + i + ‘时’); } document.write;
document.write(”);
for{ document.writeln(” + i + ‘分’); } document.write; document.write;
//输出一条横线 document.write(‘

‘); document.write(‘

‘); document.write(‘

‘); document.write(‘

‘); document.write(‘

‘); for(var i =0;i < weekName.length;i ++){ //输出星期
document.write(‘

‘ + weekName[i] + ‘

‘); } document.write; document.write; //输出天的选择 document.write(‘

‘); var n = 0; for { document.write (‘

‘); for { document.write(‘

‘); n ++; } document.write ; } document.write (‘

‘); document.write(‘

‘); document.write(‘

‘); document.write(‘

清空;)’+
‘关闭;)’ +
‘确定’ + ‘

‘); document.write ; document.write; document.write;
//—————— end 页面显示部分 —————————//
//—————— 显示日期时间的span标签响应事件
—————————// //单击年份span标签响应 function
spanYearCEvent(){ hideElementsById(new
Array(“selTianYear”,”tiannetMonthHead”),false); if hideElementsById(new
Array,false); if hideElementsById(new Array,false); hideElementsById(new
Array(“tiannetYearHead”,”selTianMonth”,”selTianHour”,”selTianMinute”),true);
} //单击月份span标签响应 function spanMonthCEvent(){
hideElementsById(new Array(“selTianMonth”,”tiannetYearHead”),false); if
hideElementsById(new Array,false); if hideElementsById(new Array,false);
hideElementsById(new
Array(“tiannetMonthHead”,”selTianYear”,”selTianHour”,”selTianMinute”),true);
} //单击小时span标签响应 function spanHourCEvent(){ hideElementsById(new
Array(“tiannetYearHead”,”tiannetMonthHead”),false); if
hideElementsById(new Array; if hideElementsById(new Array,false);
hideElementsById(new
Array(“tiannetHourHead”,”selTianYear”,”selTianMonth”,”selTianMinute”),true);
} //单击分钟span标签响应 function spanMinuteCEvent(){
hideElementsById(new Array(“tiannetYearHead”,”tiannetMonthHead”),false);
if hideElementsById(new Array,false); if hideElementsById(new
Array,false); hideElementsById(new
Array(“tiannetMinuteHead”,”selTianYear”,”selTianMonth”,”selTianHour”),true);
} //根据标签id隐藏或显示标签 function hideElementsById{ var strDisplay =
“”; if strDisplay = “none”; for(var i = 0;i < arrId.length;i ++){ var
obj = document.getElementById; obj.style.display = strDisplay; } }
//—————— end 显示日期时间的span标签响应事件
—————————// //判断某年是否为闰年 function isPinYear{
var bolRet = false; if (0==year%4&&|| { bolRet = true; } return bolRet;
} //得到一个月的天数,闰年为29天 function getMonthCount{ var
c=m_aMonHead[month-1]; if&&isPinYear c++; return c; }
//重新设置当前的日。主要是防止在翻年、翻月时,当前日大于当月的最大日
function setRealDayCount() { if( tiannetDay >
getMonthCount(tiannetYear,tiannetMonth) ) {
//如果当前的日大于当月的最大日,则取当月最大日 tiannetDay =
getMonthCount(tiannetYear,tiannetMonth); } } //在个位数前加零 function
addZero{ if{ value = “0” + value; } return value; } //取出空格 function
tiannetTrim { return str.replace; } //为select创建一个option function
createOption{ var option = document.createElement; option.value = value;
option.text = text; objSelect.options.add; } //往前翻 Year function
tiannetPrevYear() { if(tiannetYear > 999 && tiannetYear
<10000){tiannetYear–;} else{alert;}
tiannetSetDay(tiannetYear,tiannetMonth);
//如果年份小于允许的最小年份,则创建对应的option if( tiannetYear <
tiannetYearSt ) { tiannetYearSt = tiannetYear;
createOption(document.all.selTianYear,tiannetYear,tiannetYear + “年”); }
checkSelect(document.all.selTianYear,tiannetYear); tiannetWriteHead(); }
//往后翻 Year function tiannetNextYear() { if(tiannetYear > 999 &&
tiannetYear <10000){tiannetYear++;} else{alert;return;}
tiannetSetDay(tiannetYear,tiannetMonth);
//如果年份超过允许的最大年份,则创建对应的option if( tiannetYear >
tiannetYearEnd ) { tiannetYearEnd = tiannetYear;
createOption(document.all.selTianYear,tiannetYear,tiannetYear + “年”); }
checkSelect(document.all.selTianYear,tiannetYear); tiannetWriteHead(); }
//选择今天 function tiannetToday() { tiannetYear =
tiannetDateNow.getFullYear(); tiannetMonth =
tiannetDateNow.getMonth()+1; tiannetDay = tiannetDateNow.getDate();
tiannetSetValue; //tiannetSetDay(tiannetYear,tiannetMonth);
//selectObject(); } //往前翻月份 function tiannetPrevMonth() {
if{tiannetMonth–}else{tiannetYear–;tiannetMonth=12;}
tiannetSetDay(tiannetYear,tiannetMonth);
checkSelect(document.all.selTianMonth,tiannetMonth); tiannetWriteHead();
} //往后翻月份 function tiannetNextMonth() {
if{tiannetYear++;tiannetMonth=1}else{tiannetMonth++}
tiannetSetDay(tiannetYear,tiannetMonth);
checkSelect(document.all.selTianMonth,tiannetMonth); tiannetWriteHead();
} //向span标签中写入年、月、时、分等数据 function tiannetWriteHead(){
document.all.tiannetYearHead.innerText = tiannetYear + “年”;
document.all.tiannetMonthHead.innerText = tiannetMonth + “月”; if
document.all.tiannetHourHead.innerText = ” “+tiannetHour + “时”; if
document.all.tiannetMinuteHead.innerText = tiannetMinute + “分”;
tiannetSetValue;//给文本框赋值,但不隐藏本控件 } //设置显示天 function
tiannetSetDay { setRealDayCount();//设置当月真实的日 tiannetWriteHead();
var strDateFont1 = “”, strDateFont2 = “” //处理日期显示的风格 for (var i
= 0; i < 37; i++){tiannetArrDay[i]=””}; //将显示框的内容全部清空
var day1 = 1; var firstday = new Date; //某月第一天的星期几 for (var i =
firstday; day1 < getMonthCount{ tiannetArrDay[i]=day1;day1++; }
//如果用于显示日的最后一行的第一个单元格的值为空,则隐藏整行。
//if(tiannetArrDay[35] == “”){ //
document.all.trTiannetDay5.style.display = “none”; //} else { //
document.all.trTiannetDay5.style.display = “”; //} for (var i = 0; i
< 37; i++){ var da = eval(“document.all.tdTiannetDay”+i)
//书写新的一个月的日期星期排列 if {
//判断是否为周末,如果是周末,则改为红色字体 if % 7 == 0){ strDateFont1
= “” strDateFont2 = “” } else { strDateFont1 = “”; strDateFont2 = “” }
da.innerHTML = strDateFont1 + tiannetArrDay[i] + strDateFont2;
//如果是当前选择的天,则改变颜色 if(tiannetArrDay[i] == tiannetDay ) {
da.style.backgroundColor = “#CCCCCC”; } else { da.style.backgroundColor
= “#EFEFEF”; } da.style.cursor=”hand” } else {
da.innerHTML=””;da.style.backgroundColor=””;da.style.cursor=”default” }
}//end for tiannetSetValue;//给文本框赋值,但不隐藏本控件 }//end
function tiannetSetDay //根据option的值选中option function
checkSelect(objSelect,selectValue) { var count = parseInt; if(
selectValue < 10 && selectValue.toString { selectValue =
selectValue.substring; } for(var i = 0;i < count;i ++){
if(objSelect.options[i].value == selectValue){ objSelect.selectedIndex
= i; break; } }//for } //选中年、月、时、分等下拉框 function
selectObject(){ //如果年份小于允许的最小年份,则创建对应的option if(
tiannetYear < tiannetYearSt ) { for( var i = tiannetYear;i <
tiannetYearSt;i ++ ){ createOption(document.all.selTianYear,i,i + “年”);
} tiannetYearSt = tiannetYear; }
//如果年份超过允许的最大年份,则创建对应的option if( tiannetYear >
tiannetYearEnd ) { for( var i = tiannetYearEnd+1;i <= tiannetYear;i
++ ){ createOption(document.all.selTianYear,i,i + “年”); }
tiannetYearEnd = tiannetYear; }
checkSelect(document.all.selTianYear,tiannetYear);
checkSelect(document.all.selTianMonth,tiannetMonth); if
checkSelect(document.all.selTianHour,tiannetHour); if
checkSelect(document.all.selTianMinute,tiannetMinute); }
//给接受日期时间的控件赋值 //参数bolHideControl – 是否隐藏控件 function
tiannetSetValue{ var value = “”; if( !tiannetDay || tiannetDay == “” ){
tiannetOutObject.value = value; return; } var mm = tiannetMonth; var day
= tiannetDay; if( mm < 10 && mm.toString mm = “0” + mm; if( day <
10 && day.toString day = “0” + day; value = tiannetYear +
tiannetDateSplit + mm + tiannetDateSplit + day; if{ var hour =
tiannetHour; if( hour < 10 && hour.toString hour = “0” + hour; value
+= tiannetDateTimeSplit + hour; } if{ var minute = tiannetMinute; if(
minute < 10 && minute.toString minute = “0” + minute; value +=
tiannetTimeSplit + minute; } tiannetOutObject.value = value;
//document.all.divTiannetDate.style.display = “none”; if {
tiannetHideControl(); } } //是否显示时间 function showTime(){ if(
!m_bolShowHour && m_bolShowMinute){ alert; return; }
hideElementsById(new
Array(“tiannetHourHead”,”selTianHour”,”tiannetMinuteHead”,”selTianMinute”),true);
if{ //显示小时 hideElementsById(new Array,false); } if{ //显示分钟
hideElementsById(new Array,false); } }
//弹出显示日历选择控件,以让用户选择 function tiannetPopCalendar(){
//隐藏下拉框,显示相对应的head hideElementsById(new
Array(“selTianYear”,”selTianMonth”,”selTianHour”,”selTianMinute”),true);
hideElementsById(new
Array(“tiannetYearHead”,”tiannetMonthHead”,”tiannetHourHead”,”tiannetMinuteHead”),false);
tiannetSetDay(tiannetYear,tiannetMonth); tiannetWriteHead; var dads =
document.all.divTiannetDate.style; var iX, iY; var h =
document.all.divTiannetDate.offsetHeight; var w =
document.all.divTiannetDate.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; //计算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; dads.left = iX;
dads.top = iY; tiannetShowControl; } //隐藏日历控件 function
tiannetHideControl(){ document.all.divTiannetDate.style.display =
“none”; tiannetShowObject(); arrTiannetHide = new
Array();//将被隐藏的标签对象清空 } //显示日历控件 function
tiannetShowControl(){ document.all.divTiannetDate.style.display = “”;
tiannetHideObject; tiannetHideObject; }
//根据标签名称隐藏标签。如会遮住控件的select,object function
tiannetHideObject { x = document.all.divTiannetDate.offsetLeft; y =
document.all.divTiannetDate.offsetTop; h =
document.all.divTiannetDate.offsetHeight; w =
document.all.divTiannetDate.offsetWidth; for (var i = 0; i <
document.all.tags.length; i++) { var obj = document.all.tags[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.tagName.toUpperCase{ objLeft +=
objParent.offsetLeft; objTop += objParent.offsetTop; objParent =
objParent.offsetParent; } //alert(“控件左端:” + x + “select左端” + +
“控件底部:” + + “select高:” + objTop); var bolHide = true; if(
obj.style.display == “none” || obj.style.visibility == “hidden” ||
obj.getAttribute == “tiannet” ){
//如果标签本身就是隐藏的,则不需要再隐藏。如果是控件中的下拉框,也不用隐藏。
bolHide = false; } if( > x && > objTop && > y && objLeft < {
//arrTiannetHide.push;//记录被隐藏的标签对象
arrTiannetHide[arrTiannetHide.length] = obj; obj.style.visibility =
“hidden”; } } } //显示被隐藏的标签 function tiannetShowObject(){ for(var
i = 0;i < arrTiannetHide.length;i ++){ //alert;
arrTiannetHide[i].style.visibility = “”; } } //初始化日期。 function
tiannetInitDate{ var arr = strDate.split; tiannetYear = arr[0];
tiannetMonth = arr[1]; tiannetDay = arr[2]; } //清空 function
tiannetClear(){ tiannetOutObject.value = “”; tiannetHideControl(); }
//任意点击时关闭该控件 function document.onclick(){
with(window.event.srcElement){ if (tagName != “INPUT” && getAttribute !=
“tiannet”) tiannetHideControl(); } } //按ESC键关闭该控件 function
document.onkeypress(){ if( event.keyCode == 27 ){ tiannetHideControl();
} } Calendar.html: 复制代码 代码如下:

只选择日期

发表评论

电子邮件地址不会被公开。 必填项已用*标注