在许多表单中要输入日期,通常的做法是给出三个下拉框,然后分别选择年,月和日。
这里所讲的是,采用一个Text编辑框来放日期,选择日期功能,则采用弹出一个日历窗口,在窗口中让用户选择,则Text比较框中自动把日期填上。
下面我们讲讲怎样实现它。
在日期选择的处理上,例子如下:
wnl.htm
|
在新窗口中打开的是一个日历窗口,关于日历窗口,它主要是要选择日期的Javascript如下:
|
下面我们给出完整的日历代码[PHP代码]
wnl/wnl.php
|
下面是日历模板[采用特殊模式的模板]
wnl/wnl.html
<!--
<?php
//---------------------------------------------------------------------------
// Filename : wnl.html
// Author : Bai Jianping< hakusan@sohu.com>
// Description : 万年历程序的界面表现模板部分
// Date : 2005-03-18
// Version : 1.0
// Copyright : Chinux Team
//---------------------------------------------------------------------------
// History :
//
// Date Author Modification
//---------------------------------------------------------------------------
// 2005-03-18 Bai Jianping - create file
//---------------------------------------------------------------------------
//---------------------------------------------------------------------------
$headtitle = "我的万年历";
$labellastyear = "上一年";
$labelnextyear = "下一年";
$labellastmonth = "上一月";
$labelnextmonth = "下一月";
$labelyear = "年";
$labelmonth = "月";
$labelthismonth = "本 月";
$labelsunday = "日";
$labelmonday = "一";
$labeltuesday = "二";
$labelwednesday = "三";
$labelthursday = "四";
$labelfriday = "五";
$labelsaturday = "六";
print <<<EOT
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>{$headtitle}</title>
<style type='text/css'>
a { text-decoration: none; color: #003366 }
a:hover { text-decoration: underline }
body { scrollbar-base-color: #F1F9FE; scrollbar-arrow-color: #5AA8DA; font: 12px Tahoma, Verdana; background-color: #1A60A8;MARGIN: 0; }
table { font: 12px Tahoma, Verdana; color: #333333; border-width:1px; border-style:solid; border-color:#6699FF }
td {FONT-SIZE: 12px; border-collapse:separate; border-width:1px; border-style:solid; border-color:#FFCCFF; text-align:center}
input,textarea { font: 11px Tahoma, Verdana; color: #333333; font-weight: normal; background-color: #F1F9FE ;
border-width:1px; border-style:solid; border-color:#66CCFF}
select { border-width:1px; border-style:solid;border-color:#66CCFF;font: 11px Arial, Tahoma; color: #333333; font-weight: normal; background-color: #F1F9FE }
div.quote{
margin:5px 20px;border:1px solid #CCCCCC;padding:5px;background:#F3F3F3 ;line-height : normal;
}
img {border:0;}
</style>
<script language="javascript">
function returnDate(varDate)
{
var strDate = "{$yyyy}-{$mm}-";
strDate += varDate;
window.opener.document.form1.textdate.value = strDate;
}
</script>
</head>
<body bgcolor="#000000">
<form name="form1" method="post" action="wnl.php">
<input name="yyyymm" type="hidden" value="">
<table width="530" border="0" align="center" bgcolor="#6699FF">
<tr bgcolor="#FFFFFF">
<td colspan="7">{$headtitle}</td>
</tr>
<tr bgcolor="#FFCCFF">
<td><input name="year" type="button" value="{$labellastyear}" onClick="javascript:yyyymm.value='LASTYYYY';submit()"></td>
<td><input name="year" type="button" value="{$labellastmonth}" onClick="javascript:yyyymm.value='LASTMM';submit()"></td>
<td colspan="3">
<select name="selectyyyy" onChange="javascript:yyyymm.value='SELECTFORMAT';submit()">
<!--
EOT;
// 输出可选的年份
for($i = $YYYY_MIN; $i < $YYYY_MAX + 1; $i++)
{
if ($i == $yyyy)
{
print <<<EOT
-->
<option value="{$i}" selected>{$i}</option>
<!--
EOT;
}
else
{
print <<<EOT
-->
<option value="{$i}">{$i}</option>
<!--
EOT;
}
}
print <<<EOT
-->
</select>
{$labelyear}
<select name="selectmm" onChange="javascript:yyyymm.value='SELECTFORMAT';submit()">
<!--
EOT;
// 输出可选的月份
for($i = 1; $i < 13; $i++)
{
if ($i == $mm)
{
print <<<EOT
-->
<option value="{$i}" selected>{$i}</option>
<!--
EOT;
}
else
{
print <<<EOT
-->
<option value="{$i}">{$i}</option>
<!--
EOT;
}
}
print <<<EOT
-->
</select>
{$labelmonth}
</td>
<td><input type="button" name="Submit" value="{$labelnextmonth}" onClick="javascript:yyyymm.value='NEXTMM';submit()"></td>
<td><input type="button" name="Submit" value="{$labelnextyear}" onClick="javascript:yyyymm.value='NEXTYYYY';submit()"></td>
</tr>
<tr bgcolor="#CCCCFF">
<td>{$labelsunday}</td>
<td>{$labelmonday}</td>
<td>{$labeltuesday}</td>
<td>{$labelwednesday}</td>
<td>{$labelthursday}</td>
<td>{$labelfriday}</td>
<td>{$labelsaturday}</td>
</tr>
<!--
EOT;
$idx = 0;
// 如果要显示的月份是本月的话,当天的日期要着重显示
if ($yyyy == date("Y") && $mm == date("m"))
{
// $dayarray[$week - 1 + $dd] = "<b><font color=/"#0000FF/">" . $dayarray[$week - 1 + $dd] . "</font></b>";
}
// 显示月历
for ($i = 0; $i < $rows; $i++)
{
print <<<EOT
-->
<tr bgcolor="#FFFFCC">
<!--
EOT;
// 显示周历
for ($j = 0; $j < 7; $j++)
{
print <<<EOT
-->
<td {$bgcolor} > <a href="javascript:returnDate({$dayarray[$idx]})">{$dayarray[$idx]}</a> </td>
<!--
EOT;
$idx++;
}
print <<<EOT
-->
</tr>
<!--
EOT;
}
// 显示当日日期
$today = date("D, j M Y T");
print <<<EOT
-->
<tr bgcolor="#CCCCFF">
<td colspan="6">{$today}</td>
<td><input name="today" type="button" value="{$labelthismonth}" onClick="javascript:yyyymm.value='THISMONTH';submit();"></td>
</tr>
</table>
</form>
</body>
</html>
<!--
EOT;
?>
-->