当前页面: 开发资料首页 → Javascript 专题 → 最精致的日历式日期输入控件 (Smart Ver 1.00)
摘要: 最精致的日历式日期输入控件 (Smart Ver 1.00)
<script LANGUAGE="JavaScript">
修改区
时间:
修改人:
原因:
********************************************************************/
/*基本参数*/
var Frw=106; //日历宽度
var Frh=137; //日历高度
var Frs=4; //影子大小
var Hid=true;//日历是否打开
/*创建框架*/
document.writeln('
/*隐藏日历*/
function HiddenCalendar()
{
document.all.Calendar.style.display="none";
}
function CloseCalendar()
{
if (Hid)
document.all.Calendar.style.display="none";
Hid=true;
}
/*显示日历*/
function ShowCalendar(InputBox,The_Year,The_Month,The_Day)
{
var Now_Year=(The_Year==null?2004:The_Year);
var Now_Month=(The_Month==null?1:The_Month);
var Now_Day=(The_Day==null?1: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 FrameContent;
var Frl,Frt,Winw,Winh;
/*显示的位置*/
Winw=document.body.offsetWidth;
Winh=document.body.offsetHeight;
Frl=InputBox.getBoundingClientRect().left-2;
Frt=InputBox.getBoundingClientRect().top+InputBox.clientHeight;
if (((Frl+Frw+Frs)>Winw)&&(Frw+Frs
if ((Frt+Frh+Frs>Winh)&&(Frh+Frs
document.all.Calendar.style.display="";
document.all.Calendar.style.left=Frl;
document.all.Calendar.style.top=Frt;
//显示日历内容
FrameContent="\n<table onselectstart=\"return false;\" border='0' cellpadding='0' cellspacing='0' bgcolor='#395592' width='100%' height='15' style=\"color:white;font-weight:bolder;border:0px solid\">"+"\n<tr>\n";
FrameContent+="<td width=8>";
FrameContent+="";
FrameContent+="</td>\n";
FrameContent+="<td vAlign=middle align='center'>";
FrameContent+=Now_Year;
FrameContent+="年";
FrameContent+="</td>\n";
FrameContent+="<td width=8>";
FrameContent+="";
FrameContent+="</td>\n";
FrameContent+="<td width=8>";
FrameContent+="";
FrameContent+="</td>\n";
FrameContent+="<td vAlign=middle align='center' width='16'>";
FrameContent+=Now_Month;
FrameContent+="</td>\n";
FrameContent+="<td vAlign=middle align='center' width='13'>";
FrameContent+="月";
FrameContent+="</td>\n";
FrameContent+="<td width=8>";
FrameContent+="";
FrameContent+="</td>"+"\n";
FrameContent+="</tr>"+"\n";
FrameContent+="</table>"+"\n";
FrameContent+="<table onselectstart=\"return false;\" border='0' cellpadding='0' cellspacing='1' width='100%' bgcolor='#CCCCCC'>"+"\n";
FrameContent+="<tr bgcolor='#F5F5F5'>"+"\n";
FrameContent+="<td>
FrameContent+="<td>
FrameContent+="<td>
FrameContent+="<td>
FrameContent+="<td>
FrameContent+="<td>
FrameContent+="<td>
FrameContent+="</tr>"+"\n";
//如果本月第一天是星期一或星期天.应加上七.保证可以看到上个月的日期
if (fw<2)
tf=fw+7;
else
tf=fw;
FrameContent+="<tr bgcolor='#FFFFFF'>"+"\n";
//第一行上月日期
for (l=(ld-tf+2);l<=ld;l++)
{
FrameContent+="<td onclick=\"parent.ForwardMonth (window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+l+")\" style='cursor:hand'>
w++;
}
//第一行本月日期
for (f=tf;f<=7;f++)
{
//星期天但非输入日期
if (((w%7)==0)&&(d!=Now_Day))
FrameContent+="<td onMouseOver=\"this.style.background=\'#E1E1E1\'\" onMouseOut=\"this.style.background=\'#FFFFFF\'\" onClick=\"parent.InputValue(window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+d+");parent.HiddenCalendar()\" style='cursor:hand'>
//日期为输入日期
else if (d==Now_Day)
FrameContent+="<td style=\"background:#420042;cursor:hand\" onClick=\"parent.InputValue(window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+d+");parent.HiddenCalendar()\">
//其它
else
FrameContent+="<td onMouseOver=\"this.style.background=\'#E1E1E1\'\" onMouseOut=\"this.style.background=\'#FFFFFF\'\" onClick=\"parent.InputValue(window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+d+");parent.HiddenCalendar()\" style='cursor:hand'>
d++;
w++;
}
FrameContent+="</tr>"+"\n";
w=1;
for (i=2;i<7;i++)
{
FrameContent+="<tr bgcolor='#FFFFFF'>"+"\n";
for (j=1;j<8;j++)
{
if (isnd)//下个月的日期
FrameContent+="<td style='cursor:hand' onclick=\"parent.NextMonth (window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+d+")\">
else//本月的日期
{
//星期天但非输入日期
if (((w%7)==0)&&(d!=Now_Day))
FrameContent+="<td onMouseOver=\"this.style.background=\'#E1E1E1\'\" onMouseOut=\"this.style.background=\'#FFFFFF\'\" onClick=\"parent.InputValue(window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+d+");parent.HiddenCalendar()\" style='cursor:hand'>
//日期为输入日期
else if (d==Now_Day)
FrameContent+="<td style=\"background:#420042;cursor:hand\" onClick=\"parent.InputValue(window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+d+");parent.HiddenCalendar()\">
//其它
else
FrameContent+="<td onMouseOver=\"this.style.background=\'#E1E1E1\'\" onMouseOut=\"this.style.background=\'#FFFFFF\'\" onClick=\"parent.InputValue(window.parent.document.all."+InputBox.name+","+Now_Year+","+Now_Month+","+d+");parent.HiddenCalendar()\" style='cursor:hand'>
}
//判断是否为本月的日期
if (d==td)
{
isnd=true;
d=0;
}
w++;
d++;
}
FrameContent+="</tr>"+"\n";
}
FrameContent+="</table>"+"\n";
FrameContent+="<table onselectstart=\"return false;\" cellpadding='0' cellspacing='0' bgcolor='#F5F5F5' width='100%' height='15'>"+"\n<tr>\n";
FrameContent+="<td title=\"今日:"+GetTodayDate()+"\" style=\"cursor:hand\" onclick=\"parent.SetTodayDate(window.parent.document.all."+InputBox.name+")\">";
FrameContent+="今日:"+GetTodayDate();
FrameContent+="</td>\n";
FrameContent+="<td>";
FrameContent+="";
FrameContent+="</td>\n";
FrameContent+="</tr>\n";
document.all.Calendar.innerHTML=FrameContent;
document.all.Calendar.style.display="";
}
/*显示输入框*/
function DateBox(sBoxName, sDfltValue)
{
if (sBoxName==null)
sBoxName='Date_Box'
if ((sDfltValue==null)||!(DateIsTrue(sDfltValue)))
sDfltValue= GetTodayDate()
else
{
DateStr = sDfltValue.split("-");
Y= parseFloat(DateStr[0]);
M= (parseFloat(DateStr[1])<10)?('0'+parseFloat(DateStr[1])):parseFloat(DateStr[1]);
D= (parseFloat(DateStr[2])<10)?('0'+parseFloat(DateStr[2])):parseFloat(DateStr[2]);
sDfltValue=Y+'-'+M+'-'+D
}
document.write("<input size='10' readonly class='inputdate' name='"+sBoxName+"' value='"+sDfltValue+"' onclick='GetCalendar(window.document.all."+sBoxName+")' >");
}
document.onclick = CloseCalendar;
//
</script>
<body topmargin="0" leftmargin="0">
点击输入框调用日历.<script>DateBox("Test1")</script>
<script>DateBox("Test2","2004-01-01")</script>
其它事件调用日历.
<input type="text" class="inputdate" size="10" name="Test3" readonly>
<input type="button" class="inputdate" onclick="OpenDate(Test3)" value="显示日历">
</body>