JavaScript最精致日期时间输入控件.(Smart Ver 2.00)
2008-03-31 11:19
627 查看
此控件于2004发布过1.0版的.后来又加了时间输入控件,近期对他进行了整理和优化,欢迎高手指点.
特点:
根据中国人的习惯,把周一放在控件的"第一位"
优点:
采用Iframe,防止被下拉框控件"挡住".
精致,又最小的空间显示最全的信息.
易用,引入JS.调用方法即可.
控件同时包含日期和时间输入控件.
缺点:
由于采用了Iframe,导致生成日历时有点慢(0.5s/次)
仅支持IE.
<HTML>
<HEAD>
<TITLE>Smart时间输入控件 </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</HEAD>
<SCRIPT LANGUAGE="JavaScript" src="datetime.js"></SCRIPT>
<style>...
body,td,input,select{...}{
font-size:12px;
font-family:'Tahoma';
}
</style>
<BODY>
日期:<INPUT TYPE="text" NAME="date" onclick="OpenDate(this)" size="10" value="2008-08-08">
<img src="cal_date.gif" border="0" style="cursor:hand;" onclick="OpenDate(document.getElementById('date'))">
<BR>
时间:<INPUT TYPE="text" NAME="time" onclick="OpenTime(this)" size="5" value="12:35">
<img src="cal_time.gif" border="0" style="cursor:hand;" onclick="OpenTime(document.getElementById('time'))">
<BR>
<SELECT NAME="">
<OPTION VALUE="" SELECTED>选项A
<OPTION VALUE="">选项B
</SELECT>
</BODY>
</HTML>
==datetime.js==
//日期、时间控件
/**//*其它事件显示日期*/
function OpenDate(where)
...{
GetSMART_DateControl(where)
}
/**//*其它事件显示时间*/
function OpenTime(where)
...{
GetSMART_TimeControl(where)
}
/**//*关闭控件所有*/
function CloseSMART_Control()
...{
if (TimeHid && document.all.SMART_TimeControl)
document.all.SMART_TimeControl.style.display="none";
if (DateHid && document.all.SMART_DateControl)
document.all.SMART_DateControl.style.display="none";
TimeHid=true;
DateHid=true;
}
/**//*日期控件基本参数*/
var DFrw=134; //日历宽度
var DFrh=145; //日历高度
var DFrs=4; //影子大小
var DateHid=true;//日历是否隐藏
/**//*日期控件创建框架*/
document.writeln('<iframe id=SMART_DateControl Author=smart scrolling="no" frameborder=0 style="border:0px solid #EEEEEE ;position: absolute; width: '+DFrw+'; height: '+DFrh+'; z-index: 1000; filter :'progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#AAAAAA,strength='+DFrs+')' ;display: none"></iframe>');
/**//*时间控件基本参数*/
var TFrw=125; //时间控件宽度
var TFrh=63; //时间控件高度
var TFrs=4; //影子大小
var TimeHid=true;//时间控件是否隐藏
/**//*时间控件创建框架*/
document.writeln('<iframe id=SMART_TimeControl Author=smart scrolling="no" frameborder=0 style="border:0px solid #EEEEEE ;position: absolute; width: '+TFrw+'; height: '+TFrh+'; z-index: 1000; filter :'progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#AAAAAA,strength='+TFrs+')' ;display: none"></iframe>');
/**//*格式化小于10的数字,在前面加"0"*/
function FormatNum(n)
...{
if (n<10)
return '0'+n
else
return n
}
//日历控件
/**//*取得今日日期*/
function GetTodayDate()
...{
today= new Date();
y= today.getYear();
m= (today.getMonth() + 1);
if (m<10)
...{
m='0'+m;
}
d= today.getDate();
if (d<10)
...{
d='0'+d;
}
return y+'-'+m+'-'+d
}
/**//*输入今天日期*/
function SetTodayDate(InputBox)
...{
HiddenSMART_DateControl();
InputBox.value=GetTodayDate();
}
/**//*取某年某月第一天的星期值(月份-1)*/
function GetFirstWeek(The_Year,The_Month)
...{
return (new Date(The_Year,The_Month-1,1)).getDay()
}
/**//*取某年某月中总天数*/
function GetThisDays(The_Year,The_Month)
...{
return (new Date(The_Year,The_Month,0)).getDate()
}
/**//*取某年某月上个月中总天数*/
function GetLastDays(The_Year,The_Month)
...{
return (new Date(The_Year,The_Month-1,0)).getDate()
}
/**//*判断是否是闰年*/
function RunNian(The_Year)
...{
if ((The_Year%400==0) || ((The_Year%4==0) && (The_Year%100!=0)))
return true;
else
return false;
}
/**//* 判断日期(YYYY-MM-DD)的日期是否正确 */
function DateIsTrue(asDate)...{
var lsDate = asDate + "";
var loDate = lsDate.split("-");
if (loDate.length!=3) return false;
var liYear = parseFloat(loDate[0]);
var liMonth = parseFloat(loDate[1]);
var liDay = parseFloat(loDate[2]);
if ((loDate[0].length>4)||(loDate[1].length>2)||(loDate[2].length>2)) return false;
if (isNaN(liYear)||isNaN(liMonth)||isNaN(liDay)) return false;
if ((liYear<1900)||(liYear>3000)) return false;
if ((liMonth>12)||(liMonth<=0)) return false;
if (GetThisDays(liYear,liMonth)<liDay) return false;
return !isNaN(Date.UTC(liYear,liMonth,liDay));
}
/**//*取某年某月的周值*/
function GetCountWeeks(The_Year,The_Month)
...{
var Allday;
Allday = 0;
if (The_Year>2000)
...{
for (i=2000 ;i<The_Year; i++)
if (RunNian(i))
Allday += 366;
else
Allday += 365;
for (i=2; i<=The_Month; i++)
...{
switch (i)
...{
case 2 :
if (RunNian(The_Year))
Allday += 29;
else
Allday += 28;
break;
case 3 : Allday += 31; break;
case 4 : Allday += 30; break;
case 5 : Allday += 31; break;
case 6 : Allday += 30; break;
case 7 : Allday += 31; break;
case 8 : Allday += 31; break;
case 9 : Allday += 30; break;
case 10 : Allday += 31; break;
case 11 : Allday += 30; break;
case 12 : Allday += 31; break;
}
}
}
return (Allday+6)%7;
}
/**//*输入框显示*/
function InputDateValue(InputBox,Year,Month,Day)
...{
if (Month<10)
...{
Month='0'+Month
}
if (Day<10)
...{
Day='0'+Day
}
InputBox.value=Year+"-"+Month+"-"+Day
}
//上一月
function ForwardMonth(InputBox,Year,Month,Day)
...{
Month=Month-1;
if (Month<1)
...{
Month=12;
Year=Year-1;
if (Year<1800)
Year=2500;
}
Day=((GetThisDays(Year,Month)<Day)?GetThisDays(Year,Month):Day)
ShowSMART_DateControl(InputBox,Year,Month,Day)
}
//下一月
function NextMonth(InputBox,Year,Month,Day)
...{
Month=Month+1;
if (Month>12)
...{
Month=1;
Year=Year+1;
if (Year>2500)
Year=1800;
}
Day=((GetThisDays(Year,Month)<Day)?GetThisDays(Year,Month):Day)
ShowSMART_DateControl(InputBox,Year,Month,Day)
}
//上一年
function ForwardYear(InputBox,Year,Month,Day)
...{
Year=Year-1;
if (Year<1800)
Year=2500;
Day=((GetThisDays(Year,Month)<Day)?GetThisDays(Year,Month):Day)
ShowSMART_DateControl(InputBox,Year,Month,Day)
}
//下一年
function NextYear(InputBox,Year,Month,Day)
...{
Year=Year+1;
if (Year>2500)
Year=1800;
Day=((GetThisDays(Year,Month)<Day)?GetThisDays(Year,Month):Day)
ShowSMART_DateControl(InputBox,Year,Month,Day)
}
/**//*根据输入框显示日历*/
function GetSMART_DateControl(where)
...{
DateHid=false;
var Box_Name=where.name;
var Box_value=where.value;
if (DateIsTrue(Box_value))
...{
loDate = Box_value.split("-");
Y= parseFloat(loDate[0]);
M= parseFloat(loDate[1]);
D= parseFloat(loDate[2]);
ShowSMART_DateControl(where,Y,M,D);
}
else
...{
today= new Date();
y= today.getYear();
m= (today.getMonth() + 1);
d=today.getDate();
ShowSMART_DateControl(where,y,m,d);
}
}
/**//*隐藏日历*/
function HiddenSMART_DateControl()
...{
document.all.SMART_DateControl.style.display="none";
}
function CloseSMART_DateControl()
...{
if (DateHid)
document.all.SMART_DateControl.style.display="none";
DateHid=true;
}
/**//*显示日历*/
function ShowSMART_DateControl(InputBox,The_Year,The_Month,The_Day)
...{
var Now_Year=(The_Year==null?2008:The_Year);
var Now_Month=(The_Month==null?8:The_Month);
var Now_Day=(The_Day==null?8:The_Day);
var Box_Name='window.parent.document.all.'+InputBox.name;
var fw=GetFirstWeek(Now_Year,Now_Month);
var ld=GetLastDays(Now_Year,Now_Month);
var td=GetThisDays(Now_Year,Now_Month);
var isnd=false;//是否是下个月的日期
var d=1,w=1;
var DateFrameContent;
var Frl,Frt,Winw,Winh;
/**//*显示的位置*/
Winw=document.body.offsetWidth;
Winh=document.body.offsetHeight;
Frl=InputBox.getBoundingClientRect().left;
Frt=InputBox.getBoundingClientRect().top+InputBox.clientHeight+1;
if (((Frl+DFrw+DFrs)>Winw)&&(DFrw+DFrs<Winw))
Frl=Winw-DFrw-DFrs;
if ((Frt+DFrh+DFrs>Winh)&&(DFrh+DFrs<Winh))
Frt=Winh-DFrh-DFrs;
document.all.SMART_DateControl.style.display="";
document.all.SMART_DateControl.style.left=Frl;
document.all.SMART_DateControl.style.top=Frt;
//显示日历内容
DateFrameContent=" <table border='0' cellpadding='0' cellspacing='0' class='cTitle'>"+" <tr> ";
DateFrameContent+="<td class='button' title='上一年' onclick="parent.ForwardYear (window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+Now_Day+")">7";
DateFrameContent+="</td> ";
DateFrameContent+="<td vAlign=middle align='center'>";
DateFrameContent+=Now_Year;
DateFrameContent+="年";
DateFrameContent+="</td> ";
DateFrameContent+="<td class='button' title='下一年' onclick="parent.NextYear (window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+Now_Day+")">8";
DateFrameContent+="</td> ";
DateFrameContent+="<td class='button' title='上一月' onclick="parent.ForwardMonth (window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+Now_Day+")">7";
DateFrameContent+="</td> ";
DateFrameContent+="<td vAlign=middle align='center' width='16'>";
DateFrameContent+=Now_Month;
DateFrameContent+="</td> ";
DateFrameContent+="<td vAlign=middle align='center' width='13'>";
DateFrameContent+="月";
DateFrameContent+="</td> ";
DateFrameContent+="<td class='button' title='下一月' onclick="parent.NextMonth (window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+Now_Day+")">8";
DateFrameContent+="</td>"+" ";
DateFrameContent+="</tr>"+" ";
DateFrameContent+="</table>"+" ";
DateFrameContent+="<table border='0' cellpadding='0' cellspacing='1' class='cWeek'>"+" ";
DateFrameContent+="<tr bgcolor='#F5F5F5'>"+" ";
DateFrameContent+="<td><center>一</center></td>"+" ";
DateFrameContent+="<td><center>二</center></td>"+" ";
DateFrameContent+="<td><center>三</center></td>"+" ";
DateFrameContent+="<td><center>四</center></td>"+" ";
DateFrameContent+="<td><center>五</center></td>"+" ";
DateFrameContent+="<td><center>六</center></td>"+" ";
DateFrameContent+="<td><center><font color='#FF0000'>日</font></center></td>"+" ";
DateFrameContent+="</tr>"+" ";
//如果本月第一天是星期一或星期天.应加上七.保证可以看到上个月的日期
if (fw<2)
tf=fw+7;
else
tf=fw;
DateFrameContent+="<tr bgcolor='#FFFFFF'>"+" ";
//第一行上月日期
for (l=(ld-tf+2);l<=ld;l++)
...{
DateFrameContent+="<td onclick="parent.ForwardMonth (window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+l+")" style='cursor:hand'><center><font color='#BBBBBB'>"+l+"</font></center></td>"+" ";
w++;
}
//第一行本月日期
for (f=tf;f<=7;f++)
...{
//星期天但非输入日期
if (((w%7)==0)&&(d!=Now_Day))
DateFrameContent+="<td onMouseOver="this.style.background='#E1E1E1'" onMouseOut="this.style.background='#FFFFFF'" onClick="parent.InputDateValue(window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+d+");parent.HiddenSMART_DateControl()" style='cursor:hand'><center><font color='#FF0000'>"+d+"</font></center></td>"+" ";
//日期为输入日期
else if (d==Now_Day)
DateFrameContent+="<td style="background:#420042;cursor:hand" onClick="parent.InputDateValue(window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+d+");parent.HiddenSMART_DateControl()"><center><font color='#FFFFFF'>"+d+"</font></center></td>"+" ";
//其它
else
DateFrameContent+="<td onMouseOver="this.style.background='#E1E1E1'" onMouseOut="this.style.background='#FFFFFF'" onClick="parent.InputDateValue(window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+d+");parent.HiddenSMART_DateControl()" style='cursor:hand'><center>"+d+"</center></td>"+" ";
d++;
w++;
}
DateFrameContent+="</tr>"+" ";
w=1;
for (i=2;i<7;i++)
...{
DateFrameContent+="<tr bgcolor='#FFFFFF'>"+" ";
for (j=1;j<8;j++)
...{
if (isnd)//下个月的日期
DateFrameContent+="<td style='cursor:hand' onclick="parent.NextMonth (window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+d+")"><center><font color='#BBBBBB'>"+d+"</font></center></td>"+" ";
else//本月的日期
...{
//星期天但非输入日期
if (((w%7)==0)&&(d!=Now_Day))
DateFrameContent+="<td onMouseOver="this.style.background='#E1E1E1'" onMouseOut="this.style.background='#FFFFFF'" onClick="parent.InputDateValue(window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+d+");parent.HiddenSMART_DateControl()" style='cursor:hand'><center><font color='#FF0000'>"+d+"</font></center></td>"+" ";
//日期为输入日期
else if (d==Now_Day)
DateFrameContent+="<td style="background:#420042;cursor:hand" onClick="parent.InputDateValue(window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+d+");parent.HiddenSMART_DateControl()"><center><font color='#FFFFFF'>"+d+"</font></center></td>"+" ";
//其它
else
DateFrameContent+="<td onMouseOver="this.style.background='#E1E1E1'" onMouseOut="this.style.background='#FFFFFF'" onClick="parent.InputDateValue(window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+d+");parent.HiddenSMART_DateControl()" style='cursor:hand'><center>"+d+"</center></td>"+" ";
}
//判断是否为本月的日期
if (d==td)
...{
isnd=true;
d=0;
}
w++;
d++;
}
DateFrameContent+="</tr>"+" ";
}
DateFrameContent+="</table>"+" ";
DateFrameContent+="<table cellpadding='0' cellspacing='0' class='cToday'>"+" <tr> ";
DateFrameContent+="<td title="今日:"+GetTodayDate()+"" style="cursor:hand" onclick="parent.SetTodayDate(window.parent.document.all."+InputBox.name+")">";
DateFrameContent+="<font color=red>今日:</font>"+GetTodayDate();
DateFrameContent+="</td> ";
DateFrameContent+="<td title='关闭' class='button' onclick="parent.HiddenSMART_DateControl()">r";
DateFrameContent+="</td> ";
DateFrameContent+="</tr> ";
DateFrameContent+="</table> ";
DateFrameContent='<HTML> '
+ '<STYLE>' + STYLE_CODE + '</STYLE>'
+ '<BODY onselectstart="return false;" leftmargin=0 topmargin=0 rightmargin=0 bottommargin=0 bgcolor="#F5F5F5"; style="cursor:default;background-color:transparent;border:0px solid black;scroll:no">'+DateFrameContent
+ '</BODY> </HTML>';
window.frames.SMART_DateControl.document.writeln(DateFrameContent);
window.frames.SMART_DateControl.document.close();
document.all.SMART_DateControl.style.display="";
}
//时间控件----------------------------------------------------------------------------------------
/**//*取得系统时间*/
function GetNowTime()
...{
Now= new Date();
h=FormatNum(Now.getHours());
m=FormatNum(Now.getMinutes());
return h+":"+m
}
/**//*判断时间值是否有效*/
function TimeIsTrue(TimeVal)
...{
timeval=TimeVal.split(":");
HVal=parseFloat(timeval[0]);
MVal=parseFloat(timeval[1]);
if ((HVal>=0 && HVal<24) &&(MVal>=0 && MVal<60))
return true
else
return false
}
/**//*根据输入框显示时间控件*/
function GetSMART_TimeControl(where)
...{
TimeHid=false;
var Box_Name=where.name;
var Box_value=where.value;
if (TimeIsTrue(Box_value))
...{
var Box_Name=where.name;
var Box_value=where.value;
loTime = Box_value.split(":");
H= parseFloat(loTime[0]);
M= parseFloat(loTime[1]);
ShowSMART_TimeControl(where,H,M)
}
else
...{
Now= new Date();
H=Now.getHours();
M=Now.getMinutes();
ShowSMART_TimeControl(where,H,M)
}
}
/**//*隐藏时间控件*/
function HiddenSMART_TimeControl()
...{
document.all.SMART_TimeControl.style.display="none";
}
function TIME$(id)
...{
return window.frames.SMART_TimeControl.document.getElementById(id);
}
/**//*显示选择的时间*/
function ShowSelTime()
...{
var h=TIME$("HourLabel").innerHTML;
var m=TIME$("MinuteLabel").innerHTML;
h=FormatNum(h);
m=FormatNum(m);
TIME$("SelTimeLabel").innerHTML=h+":"+m;
}
/**//*更改小时数*/
function ChangeHour(h)
...{
TIME$("HourLabel").innerHTML=h;
ShowSelTime()
}
/**//*更改分钟数*/
function ChangeMinute(m)
...{
TIME$("MinuteLabel").innerHTML=m;
ShowSelTime()
}
/**//*选择时*/
function SelectHour(h)
...{
window.frames.SMART_TimeControl.document.all.HourSelect[h].selected=true;
}
/**//*选择分*/
function SelectMinute(m)
...{
window.frames.SMART_TimeControl.document.all.MinuteSelect[m].selected=true;
}
/**//*加减分钟小时数*/
function AddMinHM(hm,am)
...{
var H=parseFloat(TIME$("HourLabel").innerHTML);
var M=parseFloat(TIME$("MinuteLabel").innerHTML);
if (hm==1)
...{
if (am==1)
...{
H=H+1;
if (H>23) H=0
}
else
...{
H=H-1;
if (H<0) H=23
}
TIME$("HourLabel").innerHTML=H;
SelectHour(H);
}
else
...{
if (am==1)
...{
M=M+1;
if (M>59) M=0
}
else
...{
M=M-1;
if (M<0) M=59
}
TIME$("MinuteLabel").innerHTML=M;
SelectMinute(parseInt(M/5));
}
ShowSelTime()
}
/**//*把选择的数值附给输入框*/
function InputTimeValue(InputBox)
...{
var h=parseFloat(TIME$("HourLabel").innerHTML);
var m=parseFloat(TIME$("MinuteLabel").innerHTML);
h=FormatNum(h);
m=FormatNum(m)
InputBox.value=h+":"+m;
HiddenSMART_TimeControl();
}
/**//*输入当前系统时间*/
function InputNowValue(InputBox)
...{
var t=TIME$("NowTimeLabel").innerHTML;
InputBox.value=t;
HiddenSMART_TimeControl();
}
/**//*显示时间控件*/
function ShowSMART_TimeControl(InputBox,The_Hour,The_Minute)
...{
var Box_Name='window.parent.document.all.'+InputBox.name;
var TimeFrameContent="";
var Frl,Frt,Winw,Winh;
var i,j,m,n;
var hs,ms;
/**//*显示的位置*/
Winw=document.body.offsetWidth;
Winh=document.body.offsetHeight;
Frl=InputBox.getBoundingClientRect().left;
Frt=InputBox.getBoundingClientRect().top+InputBox.clientHeight+1;
if (((Frl+TFrw+TFrs)>Winw)&&(TFrw+TFrs<Winw))
Frl=Winw-TFrw-TFrs;
if ((Frt+TFrh+TFrs>Winh)&&(TFrh+TFrs<Winh))
Frt=Winh-TFrh-TFrs;
document.all.SMART_TimeControl.style.display="";
document.all.SMART_TimeControl.style.left=Frl;
document.all.SMART_TimeControl.style.top=Frt;
//显示时间控件内容
TimeFrameContent +="<table width='100%' border='0' cellpadding='0' cellspacing='0' bgcolor='#F5F5F5'> ";
TimeFrameContent +="<tr bgcolor='#395592'> ";
TimeFrameContent +="<td width='50%'> ";
TimeFrameContent +="<table cellpadding='0' cellspacing='0' class='cTitle'> ";
TimeFrameContent +="<tr> ";
TimeFrameContent +="<td class='button' title='-' onclick='parent.AddMinHM(1,0)'>7</td> ";
TimeFrameContent +="<td align='center'><label id=HourLabel>"+The_Hour+"</label> 时</td> ";
TimeFrameContent +="<td class='button' title='+' onclick='parent.AddMinHM(1,1)'>8</td> ";
TimeFrameContent +="</tr> ";
TimeFrameContent +="</table> ";
TimeFrameContent +="</td> ";
TimeFrameContent +="<td width='50%'> ";
TimeFrameContent +="<table cellpadding='0' cellspacing='0' class='cTitle'> ";
TimeFrameContent +="<tr> ";
TimeFrameContent +="<td class='button' title='-' onclick='parent.AddMinHM(2,0)'>7</td> ";
TimeFrameContent +="<td align='center'><label align='center' id=MinuteLabel>"+The_Minute+"</label> 分</td> ";
TimeFrameContent +="<td class='button' title='+' onclick='parent.AddMinHM(2,1)'>8</td> ";
TimeFrameContent +="</tr> ";
TimeFrameContent +="</table> ";
TimeFrameContent +="</td> ";
TimeFrameContent +="</tr> ";
TimeFrameContent +="<tr> ";
TimeFrameContent +="<td> ";
//时
TimeFrameContent +="<table cellpadding='1' cellspacing='1' border='0' width='100%'> ";
TimeFrameContent +="<tr> <td>";
TimeFrameContent +="<select class='Hselect' id='HourSelect' onchange="parent.ChangeHour(this.value)">"
for (i=0;i<24;i++ )
...{
if (i==The_Hour)
hs="selected"
else
hs=""
TimeFrameContent +="<option value='"+ i +"' "+hs+">"+ i +" 时</option> ";
}
TimeFrameContent +="</select>"
TimeFrameContent +="</td></tr> ";
TimeFrameContent +="</table> ";
TimeFrameContent +="</td> ";
TimeFrameContent +="<td> ";
//分
TimeFrameContent +="<table cellpadding='1' cellspacing='1' border='0' width='100%'> ";
TimeFrameContent +="<tr> <td>";
TimeFrameContent +="<select class='Mselect' id='MinuteSelect' onchange="parent.ChangeMinute(this.value)">"
for (j=0;j<12;j++ )
...{
if (j==parseInt(The_Minute/5))
ms="selected"
else
ms=""
TimeFrameContent +="<option value='"+ 5*j +"' "+ms+">"+ 5*j +" 分</option> ";
}
TimeFrameContent +="</select>"
TimeFrameContent +="</td></tr> ";
TimeFrameContent +="</table> ";
TimeFrameContent +="</td> ";
TimeFrameContent +="</tr> ";
TimeFrameContent +="</table> ";
TimeFrameContent +="<table cellpadding='0' cellspacing='0' class='cNowTime'> ";
/**//*现在时刻*/
/**//*
TimeFrameContent +="<tr onMouseover="this.style.backgroundColor='#E1E1E1'" onMouseOut="this.style.backgroundColor=''" > ";
TimeFrameContent +="<td style='cursor:hand' onclick='parent.InputNowValue("+Box_Name+")'><font color=blue> 现在时刻: </font><label id=NowTimeLabel>"+GetNowTime()+"</label></td> ";
TimeFrameContent +="<td> </td> ";
TimeFrameContent +="</tr> ";
*/
/**//*选择时间*/
TimeFrameContent +="<tr onMouseover="this.style.backgroundColor='#E1E1E1'" onMouseOut="this.style.backgroundColor=''" > ";
TimeFrameContent +="<td style='cursor:hand' onclick='parent.InputTimeValue("+Box_Name+")'><font color=red> 选择时间: </font><label id=SelTimeLabel>"+FormatNum(The_Hour)+":"+FormatNum(The_Minute)+"</label></td> ";
TimeFrameContent +="<td title='关闭' class='button' onclick='parent.HiddenSMART_TimeControl()'>r</td>";
TimeFrameContent +="</tr> ";
TimeFrameContent +="</table> ";
TimeFrameContent='<HTML> '
+ '<STYLE>' + STYLE_CODE + '</STYLE>'
+ '<BODY onselectstart="return false;" leftmargin=0 topmargin=0 rightmargin=0 bottommargin=0 bgcolor="#F5F5F5"; style="cursor:default;background-color:transparent;border:0px solid black;scroll:no"> '+TimeFrameContent
+ '</BODY></HTML>';
window.frames.SMART_TimeControl.document.writeln(TimeFrameContent);
window.frames.SMART_TimeControl.document.close();
document.all.SMART_TimeControl.style.display="";
}
var STYLE_CODE="body,td{font-family:'Tahoma','宋体'; font-size:9pt;} .cTitle { background: #395592; width: 100%; height: 15; color: #FFFFFF; font-weight:bold; border:0px; } .cWeek { font-family:'Tahoma'; width:100%; background: #CCCCCC } .cToday { background:#F5F5F5; width:100%; height:15; border:1px solid #CCCCCC; border-top:0px; } .inputdate { border:1px solid #7287c6; text-align: center; font-size: 12px; font-style: normal; height: 16px; } .cTitle TD { color: #FFFFFF; font-weight:bold; } .cHourTB { background: #CCCCCC; width: 100%; border:0px; } .cHourTB TR { background: #F5F5F5; text-align: center; } .cMinuteTB { background: #CCCCCC; width: 100%; border:0px; } .cMinuteTB TR { background: #FFFFFF; text-align: center; } .cNowTime { background:#F5F5F5; width:100%; height:15; border-top:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; } .Hselect { width:100%; background-color: #F5F5F5; font-size:12px; height: 16px; border: 1px solid #9C9C9C; font-family: 'Tahoma'; } .Mselect { width:100%; background-color: #F5F5F5; font-size:12px; height: 16px; border: 1px solid #9C9C9C; font-family: 'Tahoma'; }.button{ font-family:webdings; cursor:hand; width:8px;font-size:12px;padding:0px; }"
document.onclick = CloseSMART_Control;
特点:
根据中国人的习惯,把周一放在控件的"第一位"
优点:
采用Iframe,防止被下拉框控件"挡住".
精致,又最小的空间显示最全的信息.
易用,引入JS.调用方法即可.
控件同时包含日期和时间输入控件.
缺点:
由于采用了Iframe,导致生成日历时有点慢(0.5s/次)
仅支持IE.
<HTML>
<HEAD>
<TITLE>Smart时间输入控件 </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</HEAD>
<SCRIPT LANGUAGE="JavaScript" src="datetime.js"></SCRIPT>
<style>...
body,td,input,select{...}{
font-size:12px;
font-family:'Tahoma';
}
</style>
<BODY>
日期:<INPUT TYPE="text" NAME="date" onclick="OpenDate(this)" size="10" value="2008-08-08">
<img src="cal_date.gif" border="0" style="cursor:hand;" onclick="OpenDate(document.getElementById('date'))">
<BR>
时间:<INPUT TYPE="text" NAME="time" onclick="OpenTime(this)" size="5" value="12:35">
<img src="cal_time.gif" border="0" style="cursor:hand;" onclick="OpenTime(document.getElementById('time'))">
<BR>
<SELECT NAME="">
<OPTION VALUE="" SELECTED>选项A
<OPTION VALUE="">选项B
</SELECT>
</BODY>
</HTML>
==datetime.js==
//日期、时间控件
/**//*其它事件显示日期*/
function OpenDate(where)
...{
GetSMART_DateControl(where)
}
/**//*其它事件显示时间*/
function OpenTime(where)
...{
GetSMART_TimeControl(where)
}
/**//*关闭控件所有*/
function CloseSMART_Control()
...{
if (TimeHid && document.all.SMART_TimeControl)
document.all.SMART_TimeControl.style.display="none";
if (DateHid && document.all.SMART_DateControl)
document.all.SMART_DateControl.style.display="none";
TimeHid=true;
DateHid=true;
}
/**//*日期控件基本参数*/
var DFrw=134; //日历宽度
var DFrh=145; //日历高度
var DFrs=4; //影子大小
var DateHid=true;//日历是否隐藏
/**//*日期控件创建框架*/
document.writeln('<iframe id=SMART_DateControl Author=smart scrolling="no" frameborder=0 style="border:0px solid #EEEEEE ;position: absolute; width: '+DFrw+'; height: '+DFrh+'; z-index: 1000; filter :'progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#AAAAAA,strength='+DFrs+')' ;display: none"></iframe>');
/**//*时间控件基本参数*/
var TFrw=125; //时间控件宽度
var TFrh=63; //时间控件高度
var TFrs=4; //影子大小
var TimeHid=true;//时间控件是否隐藏
/**//*时间控件创建框架*/
document.writeln('<iframe id=SMART_TimeControl Author=smart scrolling="no" frameborder=0 style="border:0px solid #EEEEEE ;position: absolute; width: '+TFrw+'; height: '+TFrh+'; z-index: 1000; filter :'progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#AAAAAA,strength='+TFrs+')' ;display: none"></iframe>');
/**//*格式化小于10的数字,在前面加"0"*/
function FormatNum(n)
...{
if (n<10)
return '0'+n
else
return n
}
//日历控件
/**//*取得今日日期*/
function GetTodayDate()
...{
today= new Date();
y= today.getYear();
m= (today.getMonth() + 1);
if (m<10)
...{
m='0'+m;
}
d= today.getDate();
if (d<10)
...{
d='0'+d;
}
return y+'-'+m+'-'+d
}
/**//*输入今天日期*/
function SetTodayDate(InputBox)
...{
HiddenSMART_DateControl();
InputBox.value=GetTodayDate();
}
/**//*取某年某月第一天的星期值(月份-1)*/
function GetFirstWeek(The_Year,The_Month)
...{
return (new Date(The_Year,The_Month-1,1)).getDay()
}
/**//*取某年某月中总天数*/
function GetThisDays(The_Year,The_Month)
...{
return (new Date(The_Year,The_Month,0)).getDate()
}
/**//*取某年某月上个月中总天数*/
function GetLastDays(The_Year,The_Month)
...{
return (new Date(The_Year,The_Month-1,0)).getDate()
}
/**//*判断是否是闰年*/
function RunNian(The_Year)
...{
if ((The_Year%400==0) || ((The_Year%4==0) && (The_Year%100!=0)))
return true;
else
return false;
}
/**//* 判断日期(YYYY-MM-DD)的日期是否正确 */
function DateIsTrue(asDate)...{
var lsDate = asDate + "";
var loDate = lsDate.split("-");
if (loDate.length!=3) return false;
var liYear = parseFloat(loDate[0]);
var liMonth = parseFloat(loDate[1]);
var liDay = parseFloat(loDate[2]);
if ((loDate[0].length>4)||(loDate[1].length>2)||(loDate[2].length>2)) return false;
if (isNaN(liYear)||isNaN(liMonth)||isNaN(liDay)) return false;
if ((liYear<1900)||(liYear>3000)) return false;
if ((liMonth>12)||(liMonth<=0)) return false;
if (GetThisDays(liYear,liMonth)<liDay) return false;
return !isNaN(Date.UTC(liYear,liMonth,liDay));
}
/**//*取某年某月的周值*/
function GetCountWeeks(The_Year,The_Month)
...{
var Allday;
Allday = 0;
if (The_Year>2000)
...{
for (i=2000 ;i<The_Year; i++)
if (RunNian(i))
Allday += 366;
else
Allday += 365;
for (i=2; i<=The_Month; i++)
...{
switch (i)
...{
case 2 :
if (RunNian(The_Year))
Allday += 29;
else
Allday += 28;
break;
case 3 : Allday += 31; break;
case 4 : Allday += 30; break;
case 5 : Allday += 31; break;
case 6 : Allday += 30; break;
case 7 : Allday += 31; break;
case 8 : Allday += 31; break;
case 9 : Allday += 30; break;
case 10 : Allday += 31; break;
case 11 : Allday += 30; break;
case 12 : Allday += 31; break;
}
}
}
return (Allday+6)%7;
}
/**//*输入框显示*/
function InputDateValue(InputBox,Year,Month,Day)
...{
if (Month<10)
...{
Month='0'+Month
}
if (Day<10)
...{
Day='0'+Day
}
InputBox.value=Year+"-"+Month+"-"+Day
}
//上一月
function ForwardMonth(InputBox,Year,Month,Day)
...{
Month=Month-1;
if (Month<1)
...{
Month=12;
Year=Year-1;
if (Year<1800)
Year=2500;
}
Day=((GetThisDays(Year,Month)<Day)?GetThisDays(Year,Month):Day)
ShowSMART_DateControl(InputBox,Year,Month,Day)
}
//下一月
function NextMonth(InputBox,Year,Month,Day)
...{
Month=Month+1;
if (Month>12)
...{
Month=1;
Year=Year+1;
if (Year>2500)
Year=1800;
}
Day=((GetThisDays(Year,Month)<Day)?GetThisDays(Year,Month):Day)
ShowSMART_DateControl(InputBox,Year,Month,Day)
}
//上一年
function ForwardYear(InputBox,Year,Month,Day)
...{
Year=Year-1;
if (Year<1800)
Year=2500;
Day=((GetThisDays(Year,Month)<Day)?GetThisDays(Year,Month):Day)
ShowSMART_DateControl(InputBox,Year,Month,Day)
}
//下一年
function NextYear(InputBox,Year,Month,Day)
...{
Year=Year+1;
if (Year>2500)
Year=1800;
Day=((GetThisDays(Year,Month)<Day)?GetThisDays(Year,Month):Day)
ShowSMART_DateControl(InputBox,Year,Month,Day)
}
/**//*根据输入框显示日历*/
function GetSMART_DateControl(where)
...{
DateHid=false;
var Box_Name=where.name;
var Box_value=where.value;
if (DateIsTrue(Box_value))
...{
loDate = Box_value.split("-");
Y= parseFloat(loDate[0]);
M= parseFloat(loDate[1]);
D= parseFloat(loDate[2]);
ShowSMART_DateControl(where,Y,M,D);
}
else
...{
today= new Date();
y= today.getYear();
m= (today.getMonth() + 1);
d=today.getDate();
ShowSMART_DateControl(where,y,m,d);
}
}
/**//*隐藏日历*/
function HiddenSMART_DateControl()
...{
document.all.SMART_DateControl.style.display="none";
}
function CloseSMART_DateControl()
...{
if (DateHid)
document.all.SMART_DateControl.style.display="none";
DateHid=true;
}
/**//*显示日历*/
function ShowSMART_DateControl(InputBox,The_Year,The_Month,The_Day)
...{
var Now_Year=(The_Year==null?2008:The_Year);
var Now_Month=(The_Month==null?8:The_Month);
var Now_Day=(The_Day==null?8:The_Day);
var Box_Name='window.parent.document.all.'+InputBox.name;
var fw=GetFirstWeek(Now_Year,Now_Month);
var ld=GetLastDays(Now_Year,Now_Month);
var td=GetThisDays(Now_Year,Now_Month);
var isnd=false;//是否是下个月的日期
var d=1,w=1;
var DateFrameContent;
var Frl,Frt,Winw,Winh;
/**//*显示的位置*/
Winw=document.body.offsetWidth;
Winh=document.body.offsetHeight;
Frl=InputBox.getBoundingClientRect().left;
Frt=InputBox.getBoundingClientRect().top+InputBox.clientHeight+1;
if (((Frl+DFrw+DFrs)>Winw)&&(DFrw+DFrs<Winw))
Frl=Winw-DFrw-DFrs;
if ((Frt+DFrh+DFrs>Winh)&&(DFrh+DFrs<Winh))
Frt=Winh-DFrh-DFrs;
document.all.SMART_DateControl.style.display="";
document.all.SMART_DateControl.style.left=Frl;
document.all.SMART_DateControl.style.top=Frt;
//显示日历内容
DateFrameContent=" <table border='0' cellpadding='0' cellspacing='0' class='cTitle'>"+" <tr> ";
DateFrameContent+="<td class='button' title='上一年' onclick="parent.ForwardYear (window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+Now_Day+")">7";
DateFrameContent+="</td> ";
DateFrameContent+="<td vAlign=middle align='center'>";
DateFrameContent+=Now_Year;
DateFrameContent+="年";
DateFrameContent+="</td> ";
DateFrameContent+="<td class='button' title='下一年' onclick="parent.NextYear (window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+Now_Day+")">8";
DateFrameContent+="</td> ";
DateFrameContent+="<td class='button' title='上一月' onclick="parent.ForwardMonth (window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+Now_Day+")">7";
DateFrameContent+="</td> ";
DateFrameContent+="<td vAlign=middle align='center' width='16'>";
DateFrameContent+=Now_Month;
DateFrameContent+="</td> ";
DateFrameContent+="<td vAlign=middle align='center' width='13'>";
DateFrameContent+="月";
DateFrameContent+="</td> ";
DateFrameContent+="<td class='button' title='下一月' onclick="parent.NextMonth (window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+Now_Day+")">8";
DateFrameContent+="</td>"+" ";
DateFrameContent+="</tr>"+" ";
DateFrameContent+="</table>"+" ";
DateFrameContent+="<table border='0' cellpadding='0' cellspacing='1' class='cWeek'>"+" ";
DateFrameContent+="<tr bgcolor='#F5F5F5'>"+" ";
DateFrameContent+="<td><center>一</center></td>"+" ";
DateFrameContent+="<td><center>二</center></td>"+" ";
DateFrameContent+="<td><center>三</center></td>"+" ";
DateFrameContent+="<td><center>四</center></td>"+" ";
DateFrameContent+="<td><center>五</center></td>"+" ";
DateFrameContent+="<td><center>六</center></td>"+" ";
DateFrameContent+="<td><center><font color='#FF0000'>日</font></center></td>"+" ";
DateFrameContent+="</tr>"+" ";
//如果本月第一天是星期一或星期天.应加上七.保证可以看到上个月的日期
if (fw<2)
tf=fw+7;
else
tf=fw;
DateFrameContent+="<tr bgcolor='#FFFFFF'>"+" ";
//第一行上月日期
for (l=(ld-tf+2);l<=ld;l++)
...{
DateFrameContent+="<td onclick="parent.ForwardMonth (window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+l+")" style='cursor:hand'><center><font color='#BBBBBB'>"+l+"</font></center></td>"+" ";
w++;
}
//第一行本月日期
for (f=tf;f<=7;f++)
...{
//星期天但非输入日期
if (((w%7)==0)&&(d!=Now_Day))
DateFrameContent+="<td onMouseOver="this.style.background='#E1E1E1'" onMouseOut="this.style.background='#FFFFFF'" onClick="parent.InputDateValue(window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+d+");parent.HiddenSMART_DateControl()" style='cursor:hand'><center><font color='#FF0000'>"+d+"</font></center></td>"+" ";
//日期为输入日期
else if (d==Now_Day)
DateFrameContent+="<td style="background:#420042;cursor:hand" onClick="parent.InputDateValue(window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+d+");parent.HiddenSMART_DateControl()"><center><font color='#FFFFFF'>"+d+"</font></center></td>"+" ";
//其它
else
DateFrameContent+="<td onMouseOver="this.style.background='#E1E1E1'" onMouseOut="this.style.background='#FFFFFF'" onClick="parent.InputDateValue(window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+d+");parent.HiddenSMART_DateControl()" style='cursor:hand'><center>"+d+"</center></td>"+" ";
d++;
w++;
}
DateFrameContent+="</tr>"+" ";
w=1;
for (i=2;i<7;i++)
...{
DateFrameContent+="<tr bgcolor='#FFFFFF'>"+" ";
for (j=1;j<8;j++)
...{
if (isnd)//下个月的日期
DateFrameContent+="<td style='cursor:hand' onclick="parent.NextMonth (window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+d+")"><center><font color='#BBBBBB'>"+d+"</font></center></td>"+" ";
else//本月的日期
...{
//星期天但非输入日期
if (((w%7)==0)&&(d!=Now_Day))
DateFrameContent+="<td onMouseOver="this.style.background='#E1E1E1'" onMouseOut="this.style.background='#FFFFFF'" onClick="parent.InputDateValue(window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+d+");parent.HiddenSMART_DateControl()" style='cursor:hand'><center><font color='#FF0000'>"+d+"</font></center></td>"+" ";
//日期为输入日期
else if (d==Now_Day)
DateFrameContent+="<td style="background:#420042;cursor:hand" onClick="parent.InputDateValue(window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+d+");parent.HiddenSMART_DateControl()"><center><font color='#FFFFFF'>"+d+"</font></center></td>"+" ";
//其它
else
DateFrameContent+="<td onMouseOver="this.style.background='#E1E1E1'" onMouseOut="this.style.background='#FFFFFF'" onClick="parent.InputDateValue(window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+d+");parent.HiddenSMART_DateControl()" style='cursor:hand'><center>"+d+"</center></td>"+" ";
}
//判断是否为本月的日期
if (d==td)
...{
isnd=true;
d=0;
}
w++;
d++;
}
DateFrameContent+="</tr>"+" ";
}
DateFrameContent+="</table>"+" ";
DateFrameContent+="<table cellpadding='0' cellspacing='0' class='cToday'>"+" <tr> ";
DateFrameContent+="<td title="今日:"+GetTodayDate()+"" style="cursor:hand" onclick="parent.SetTodayDate(window.parent.document.all."+InputBox.name+")">";
DateFrameContent+="<font color=red>今日:</font>"+GetTodayDate();
DateFrameContent+="</td> ";
DateFrameContent+="<td title='关闭' class='button' onclick="parent.HiddenSMART_DateControl()">r";
DateFrameContent+="</td> ";
DateFrameContent+="</tr> ";
DateFrameContent+="</table> ";
DateFrameContent='<HTML> '
+ '<STYLE>' + STYLE_CODE + '</STYLE>'
+ '<BODY onselectstart="return false;" leftmargin=0 topmargin=0 rightmargin=0 bottommargin=0 bgcolor="#F5F5F5"; style="cursor:default;background-color:transparent;border:0px solid black;scroll:no">'+DateFrameContent
+ '</BODY> </HTML>';
window.frames.SMART_DateControl.document.writeln(DateFrameContent);
window.frames.SMART_DateControl.document.close();
document.all.SMART_DateControl.style.display="";
}
//时间控件----------------------------------------------------------------------------------------
/**//*取得系统时间*/
function GetNowTime()
...{
Now= new Date();
h=FormatNum(Now.getHours());
m=FormatNum(Now.getMinutes());
return h+":"+m
}
/**//*判断时间值是否有效*/
function TimeIsTrue(TimeVal)
...{
timeval=TimeVal.split(":");
HVal=parseFloat(timeval[0]);
MVal=parseFloat(timeval[1]);
if ((HVal>=0 && HVal<24) &&(MVal>=0 && MVal<60))
return true
else
return false
}
/**//*根据输入框显示时间控件*/
function GetSMART_TimeControl(where)
...{
TimeHid=false;
var Box_Name=where.name;
var Box_value=where.value;
if (TimeIsTrue(Box_value))
...{
var Box_Name=where.name;
var Box_value=where.value;
loTime = Box_value.split(":");
H= parseFloat(loTime[0]);
M= parseFloat(loTime[1]);
ShowSMART_TimeControl(where,H,M)
}
else
...{
Now= new Date();
H=Now.getHours();
M=Now.getMinutes();
ShowSMART_TimeControl(where,H,M)
}
}
/**//*隐藏时间控件*/
function HiddenSMART_TimeControl()
...{
document.all.SMART_TimeControl.style.display="none";
}
function TIME$(id)
...{
return window.frames.SMART_TimeControl.document.getElementById(id);
}
/**//*显示选择的时间*/
function ShowSelTime()
...{
var h=TIME$("HourLabel").innerHTML;
var m=TIME$("MinuteLabel").innerHTML;
h=FormatNum(h);
m=FormatNum(m);
TIME$("SelTimeLabel").innerHTML=h+":"+m;
}
/**//*更改小时数*/
function ChangeHour(h)
...{
TIME$("HourLabel").innerHTML=h;
ShowSelTime()
}
/**//*更改分钟数*/
function ChangeMinute(m)
...{
TIME$("MinuteLabel").innerHTML=m;
ShowSelTime()
}
/**//*选择时*/
function SelectHour(h)
...{
window.frames.SMART_TimeControl.document.all.HourSelect[h].selected=true;
}
/**//*选择分*/
function SelectMinute(m)
...{
window.frames.SMART_TimeControl.document.all.MinuteSelect[m].selected=true;
}
/**//*加减分钟小时数*/
function AddMinHM(hm,am)
...{
var H=parseFloat(TIME$("HourLabel").innerHTML);
var M=parseFloat(TIME$("MinuteLabel").innerHTML);
if (hm==1)
...{
if (am==1)
...{
H=H+1;
if (H>23) H=0
}
else
...{
H=H-1;
if (H<0) H=23
}
TIME$("HourLabel").innerHTML=H;
SelectHour(H);
}
else
...{
if (am==1)
...{
M=M+1;
if (M>59) M=0
}
else
...{
M=M-1;
if (M<0) M=59
}
TIME$("MinuteLabel").innerHTML=M;
SelectMinute(parseInt(M/5));
}
ShowSelTime()
}
/**//*把选择的数值附给输入框*/
function InputTimeValue(InputBox)
...{
var h=parseFloat(TIME$("HourLabel").innerHTML);
var m=parseFloat(TIME$("MinuteLabel").innerHTML);
h=FormatNum(h);
m=FormatNum(m)
InputBox.value=h+":"+m;
HiddenSMART_TimeControl();
}
/**//*输入当前系统时间*/
function InputNowValue(InputBox)
...{
var t=TIME$("NowTimeLabel").innerHTML;
InputBox.value=t;
HiddenSMART_TimeControl();
}
/**//*显示时间控件*/
function ShowSMART_TimeControl(InputBox,The_Hour,The_Minute)
...{
var Box_Name='window.parent.document.all.'+InputBox.name;
var TimeFrameContent="";
var Frl,Frt,Winw,Winh;
var i,j,m,n;
var hs,ms;
/**//*显示的位置*/
Winw=document.body.offsetWidth;
Winh=document.body.offsetHeight;
Frl=InputBox.getBoundingClientRect().left;
Frt=InputBox.getBoundingClientRect().top+InputBox.clientHeight+1;
if (((Frl+TFrw+TFrs)>Winw)&&(TFrw+TFrs<Winw))
Frl=Winw-TFrw-TFrs;
if ((Frt+TFrh+TFrs>Winh)&&(TFrh+TFrs<Winh))
Frt=Winh-TFrh-TFrs;
document.all.SMART_TimeControl.style.display="";
document.all.SMART_TimeControl.style.left=Frl;
document.all.SMART_TimeControl.style.top=Frt;
//显示时间控件内容
TimeFrameContent +="<table width='100%' border='0' cellpadding='0' cellspacing='0' bgcolor='#F5F5F5'> ";
TimeFrameContent +="<tr bgcolor='#395592'> ";
TimeFrameContent +="<td width='50%'> ";
TimeFrameContent +="<table cellpadding='0' cellspacing='0' class='cTitle'> ";
TimeFrameContent +="<tr> ";
TimeFrameContent +="<td class='button' title='-' onclick='parent.AddMinHM(1,0)'>7</td> ";
TimeFrameContent +="<td align='center'><label id=HourLabel>"+The_Hour+"</label> 时</td> ";
TimeFrameContent +="<td class='button' title='+' onclick='parent.AddMinHM(1,1)'>8</td> ";
TimeFrameContent +="</tr> ";
TimeFrameContent +="</table> ";
TimeFrameContent +="</td> ";
TimeFrameContent +="<td width='50%'> ";
TimeFrameContent +="<table cellpadding='0' cellspacing='0' class='cTitle'> ";
TimeFrameContent +="<tr> ";
TimeFrameContent +="<td class='button' title='-' onclick='parent.AddMinHM(2,0)'>7</td> ";
TimeFrameContent +="<td align='center'><label align='center' id=MinuteLabel>"+The_Minute+"</label> 分</td> ";
TimeFrameContent +="<td class='button' title='+' onclick='parent.AddMinHM(2,1)'>8</td> ";
TimeFrameContent +="</tr> ";
TimeFrameContent +="</table> ";
TimeFrameContent +="</td> ";
TimeFrameContent +="</tr> ";
TimeFrameContent +="<tr> ";
TimeFrameContent +="<td> ";
//时
TimeFrameContent +="<table cellpadding='1' cellspacing='1' border='0' width='100%'> ";
TimeFrameContent +="<tr> <td>";
TimeFrameContent +="<select class='Hselect' id='HourSelect' onchange="parent.ChangeHour(this.value)">"
for (i=0;i<24;i++ )
...{
if (i==The_Hour)
hs="selected"
else
hs=""
TimeFrameContent +="<option value='"+ i +"' "+hs+">"+ i +" 时</option> ";
}
TimeFrameContent +="</select>"
TimeFrameContent +="</td></tr> ";
TimeFrameContent +="</table> ";
TimeFrameContent +="</td> ";
TimeFrameContent +="<td> ";
//分
TimeFrameContent +="<table cellpadding='1' cellspacing='1' border='0' width='100%'> ";
TimeFrameContent +="<tr> <td>";
TimeFrameContent +="<select class='Mselect' id='MinuteSelect' onchange="parent.ChangeMinute(this.value)">"
for (j=0;j<12;j++ )
...{
if (j==parseInt(The_Minute/5))
ms="selected"
else
ms=""
TimeFrameContent +="<option value='"+ 5*j +"' "+ms+">"+ 5*j +" 分</option> ";
}
TimeFrameContent +="</select>"
TimeFrameContent +="</td></tr> ";
TimeFrameContent +="</table> ";
TimeFrameContent +="</td> ";
TimeFrameContent +="</tr> ";
TimeFrameContent +="</table> ";
TimeFrameContent +="<table cellpadding='0' cellspacing='0' class='cNowTime'> ";
/**//*现在时刻*/
/**//*
TimeFrameContent +="<tr onMouseover="this.style.backgroundColor='#E1E1E1'" onMouseOut="this.style.backgroundColor=''" > ";
TimeFrameContent +="<td style='cursor:hand' onclick='parent.InputNowValue("+Box_Name+")'><font color=blue> 现在时刻: </font><label id=NowTimeLabel>"+GetNowTime()+"</label></td> ";
TimeFrameContent +="<td> </td> ";
TimeFrameContent +="</tr> ";
*/
/**//*选择时间*/
TimeFrameContent +="<tr onMouseover="this.style.backgroundColor='#E1E1E1'" onMouseOut="this.style.backgroundColor=''" > ";
TimeFrameContent +="<td style='cursor:hand' onclick='parent.InputTimeValue("+Box_Name+")'><font color=red> 选择时间: </font><label id=SelTimeLabel>"+FormatNum(The_Hour)+":"+FormatNum(The_Minute)+"</label></td> ";
TimeFrameContent +="<td title='关闭' class='button' onclick='parent.HiddenSMART_TimeControl()'>r</td>";
TimeFrameContent +="</tr> ";
TimeFrameContent +="</table> ";
TimeFrameContent='<HTML> '
+ '<STYLE>' + STYLE_CODE + '</STYLE>'
+ '<BODY onselectstart="return false;" leftmargin=0 topmargin=0 rightmargin=0 bottommargin=0 bgcolor="#F5F5F5"; style="cursor:default;background-color:transparent;border:0px solid black;scroll:no"> '+TimeFrameContent
+ '</BODY></HTML>';
window.frames.SMART_TimeControl.document.writeln(TimeFrameContent);
window.frames.SMART_TimeControl.document.close();
document.all.SMART_TimeControl.style.display="";
}
var STYLE_CODE="body,td{font-family:'Tahoma','宋体'; font-size:9pt;} .cTitle { background: #395592; width: 100%; height: 15; color: #FFFFFF; font-weight:bold; border:0px; } .cWeek { font-family:'Tahoma'; width:100%; background: #CCCCCC } .cToday { background:#F5F5F5; width:100%; height:15; border:1px solid #CCCCCC; border-top:0px; } .inputdate { border:1px solid #7287c6; text-align: center; font-size: 12px; font-style: normal; height: 16px; } .cTitle TD { color: #FFFFFF; font-weight:bold; } .cHourTB { background: #CCCCCC; width: 100%; border:0px; } .cHourTB TR { background: #F5F5F5; text-align: center; } .cMinuteTB { background: #CCCCCC; width: 100%; border:0px; } .cMinuteTB TR { background: #FFFFFF; text-align: center; } .cNowTime { background:#F5F5F5; width:100%; height:15; border-top:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; } .Hselect { width:100%; background-color: #F5F5F5; font-size:12px; height: 16px; border: 1px solid #9C9C9C; font-family: 'Tahoma'; } .Mselect { width:100%; background-color: #F5F5F5; font-size:12px; height: 16px; border: 1px solid #9C9C9C; font-family: 'Tahoma'; }.button{ font-family:webdings; cursor:hand; width:8px;font-size:12px;padding:0px; }"
document.onclick = CloseSMART_Control;
相关文章推荐
- 用javascript实现的日期时间输入控件
- 两个javascript 日期、时间 输入的控件
- 用javascript实现的日期时间输入控件
- HTML5新控件 - 日期和时间选择输入
- 免费的Javascript日期输入及选择控件大杂烩!(转)
- javascript版的日期输入控件
- 免费的Javascript日期输入及选择控件大全
- HTML5新控件 - 日期和时间选择输入
- javascript版的日期输入控件
- javascript日期时间控件[转]
- meizz(梅花雨)用javascript写的一个日期输入控件!
- 很不错的一款日期输入控件,可以输入当前的时间
- javascript 日期时间控件 js代码
- mydate97时间控件最大值最小值限制及Javascript日期判断大小
- 最精致的日历式日期输入控件
- javascript版的日期输入控件
- 最精致的日历式日期输入控件
- Excel 利用日期控件输入时间
- HTML5新控件 - 日期和时间选择输入
- meizz(梅花雨)用javascript写的一个日期输入控件!