php 时间选择器

来源：互联网发布：php mysql web 超清晰编辑：程序博客网时间：2024/04/28 12:21

在许多表单中要输入日期，通常的做法是给出三个下拉框，然后分别选择年，月和日。
这里所讲的是，采用一个Text编辑框来放日期，选择日期功能，则采用弹出一个日历窗口，在窗口中让用户选择，则Text比较框中自动把日期填上。

下面我们讲讲怎样实现它。

在日期选择的处理上，例子如下：
wnl.htm

<form name="form1" method="post" action="">
<script language="javascript">
function popupCal()
{
var popup = window.open('wnl/wnl.php', 'popupcal', 'width=600,height=200,resizable=1,scrollbars=auto');

}
</script>
<input type="text" name="textdate" value="" readonly="true">
<input type="button" name="button" value="选择日期" onClick="popupCal()">
</form>

在新窗口中打开的是一个日历窗口，关于日历窗口，它主要是要选择日期的Javascript如下：
<script language="javascript">
function returnDate(varDate)
{

var strDate = "{$yyyy}-{$mm}-";
strDate += varDate;
window.opener.document.form1.textdate.value = strDate;
}
</script>

下面我们给出完整的日历代码[PHP代码]
wnl/wnl.php
<?php
//---------------------------------------------------------------------------
// Filename : wnl.php
// 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
//---------------------------------------------------------------------------
//---------------------------------------------------------------------------

$YYYY_MIN = 1900; // 最小年份
$YYYY_MAX = 2099; // 最大年份
$YYYYMM_MIN = 190001; // 最小月份
$YYYYMM_MAX = 209912; // 最大月份
if (isset($_POST['yyyymm']))
{
// 由下拉选择框选择的年月
if ($_POST['yyyymm'] == "SELECTFORMAT")
{
$yyyymm = $_POST['selectyyyy'] * 100 + $_POST['selectmm'];
}
// 由点击“本月”按钮选择的年月
else if ($_POST['yyyymm'] == "THISMONTH")
{
$yyyymm = date("Ym");
}
else
{
// 由点击“上一月”选择的年月
if ($_POST['yyyymm'] == "LASTMM")
{
$_POST['yyyymm'] = $_POST['selectyyyy'] * 100 + $_POST['selectmm'] - 1;
}
// 由点击“下一月”选择的年月
else if ($_POST['yyyymm'] == "NEXTMM")
{
$_POST['yyyymm'] = $_POST['selectyyyy'] * 100 + $_POST['selectmm'] + 1;
}
// 由点击“上一年”选择的年月
else if ($_POST['yyyymm'] == "LASTYYYY")
{
$_POST['yyyymm'] = ($_POST['selectyyyy'] - 1) * 100 + $_POST['selectmm'];
}
// 由点击“下一年”选择的年月
else if ($_POST['yyyymm'] == "NEXTYYYY")
{
$_POST['yyyymm'] = ($_POST['selectyyyy'] + 1) * 100 + $_POST['selectmm'];
}

// 限制最小与最大年月
if ($_POST['yyyymm'] < $YYYYMM_MIN)
{
$yyyymm = $YYYYMM_MIN;
}
else if ($_POST['yyyymm'] > $YYYYMM_MAX)
{
$yyyymm = $YYYYMM_MAX;
}
else if ($_POST['yyyymm'] % 100 == 0)
{
$yyyymm = $_POST['yyyymm'] - 100 + 12;
}
else if ($_POST['yyyymm'] % 100 == 13)
{
$yyyymm = $_POST['yyyymm'] + 100 - 12;
}
else
{
$yyyymm = $_POST['yyyymm'];
}
}
}
// 如果是第一次访问则取当天的日期
else
{
$yyyymm = date("Ym");
}
$yyyy = floor($yyyymm/100); // 要显示的年份
$mm = $yyyymm % 100; //　要显示的月份
$dd = date("d"); // 当天日期

// 每月的天数
$days = array(1 => 31, 2 => 28, 3 => 31, 4 => 30, 5 => 31, 6 => 30,
7 => 31, 8 => 31, 9 => 30, 10 => 31, 11 => 30, 12 => 31);

// 判断是否是闰年
if ($yyyy % 400 == 0 || $yyyy % 4 == 0 && $yyyy % 100 != 0)
{
$days[2] = 29;
}
// 判断所选年月的１号是本年第几天
for ($i = 1, $d = 1; $i < $mm; $i++)
{
$d += $days[$i];
}
// 取得所选月１号是星期几
$week = (($yyyy - 1) + floor(($yyyy - 1)/4) - floor(($yyyy - 1)/100) + floor(($yyyy - 1)/400) + $d) % 7;
// 计算显示本月日历需要几行
$alldays = $week + $days[$mm];
if ($alldays % 7 == 0)
{
$rows = floor($alldays/7);
}
else
{
$rows = floor($alldays/7) + 1;
}

// 构造显示月历数组
$dayarray = array();
for ($i = 0;$i < $week; $i++)
{
$dayarray[] = "";
}
for ($i = 1; $i < $days[$mm] + 1; $i++)
{
$dayarray[] = $i;
}
// 加入模板
require_once("wnl.html")
?>

下面是日历模板[采用特殊模式的模板]
wnl/wnl.html

<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()">

<option value="{$i}" selected>{$i}</option>

<option value="{$i}">{$i}</option>

</select>
{$labelyear}
<select name="selectmm" onChange="javascript:yyyymm.value='SELECTFORMAT';submit()">

<option value="{$i}" selected>{$i}</option>

<option value="{$i}">{$i}</option>

</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>

<tr bgcolor="#FFFFCC">

<td {$bgcolor} > <a href="javascript:returnDate({$dayarray[$idx]})">{$dayarray[$idx]}</a> </td>

</tr>

<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>