In many forms, you need to enter a date. The common practice is to give three drop-down boxes and select year, month, and day respectively.
Here, we will use a text edit box to set the date. If you select the date function, a calendar window will pop up. If you select a date in the window, the date will be automatically filled in the text comparison box.
Let's talk about how to implement it.
The processing of date selection is as follows:
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 = "select date" onclick = "popupcal ()">
</Form> |
|
In the new window, a calendar window is opened. For the calendar window, the JavaScript code for selecting a date is as follows:
<Script language = "JavaScript">
Function returndate (vardate)
{VaR strdate = "{$ yyyy}-{$ mm }-";
Strdate + = vardate;
Required bytes opener.doc ument. form1.textdate. value = strdate;
}
</SCRIPT> |
|
The complete calendar code [PHP code] is provided below.
Wnl/wnl. php
<? PHP
//---------------------------------------------------------------------------
// Filename: wnl. php
// Author: Bai Jianping // Description: main logical functions of the perpetual calendar Program
// Date: 2005-03-18
// Version 1.0
// Copyright: chinux team
//---------------------------------------------------------------------------
// History:
//
// Date Author Modification
//---------------------------------------------------------------------------
// 2005-03-18 Bai Jianping-Create File
//---------------------------------------------------------------------------
//---------------------------------------------------------------------------$ Yyyy_min = 1900; // minimum year
$ Yyyy_max = 2099; // maximum year
$ Yyyymm_min = 190001; // minimum month
$ Yyyymm_max = 209912; // maximum month
If (isset ($ _ post ['yyyymmm '])
{
// Select the year from the drop-down list.
If ($ _ post ['yyymmm '] = "selectformat ")
{
$ Yyyymm = $ _ post ['selectyyyy'] * 100 + $ _ post ['selectmm'];
}
// The year and month selected by clicking the "this month" button
Else if ($ _ post ['yyyymmm '] = "thismonth ")
{
$ Yyyymm = date ("ym ");
}
Else
{
// Select the year and month by clicking "last month"
If ($ _ post ['yyymmm '] = "lastmm ")
{
$ _ Post ['yyyymm'] = $ _ post ['selectyyyy'] * 100 + $ _ post ['selectmm']-1;
}
// Select the year and month by clicking "Next Month"
Else if ($ _ post ['yyyymmm '] = "nextmm ")
{
$ _ Post ['yyyymm'] = $ _ post ['selectyyyy'] * 100 + $ _ post ['selectmm'] + 1;
}
// The year selected by clicking "last year"
Else if ($ _ post ['yyyymmm '] = "lastyyyy ")
{
$ _ Post ['yyymmm '] = ($ _ post ['selectyyyy']-1) * 100 + $ _ post ['selectmm'];
}
// The year selected by clicking "next year"
Else if ($ _ post ['yyyymmm '] = "nextyyyy ")
{
$ _ Post ['yyyymmm '] = ($ _ post ['selectyyyy'] + 1) * 100 + $ _ post ['selectmm'];
}
// Limit the minimum and maximum months
If ($ _ post ['yyyymm'] <$ yyyymm_min)
{
$ Yyyymm = $ yyyymm_min;
}
Else if ($ _ post ['yyymmm ']> $ yyyymm_max)
{
$ Yyyymm = $ yyyymm_max;
}
Else if ($ _ post ['yyyymmm '] % 100 = 0)
{
$ Yyyymm = $ _ post ['yyyymm']-100 + 12;
}
Else if ($ _ post ['yyyymmm '] % 100 = 13)
{
$ Yyyymm = $ _ post ['yyyymm'] + 100-12;
}
Else
{
$ Yyyymm = $ _ post ['yyyymm'];
}
}
}
// If this is the first access, the date of the current day is used.
Else
{
$ Yyyymm = date ("ym ");
}
$ Yyyy = floor ($ yyyymm/100); // year to be displayed
$ Mm = $ yyyymm % 100; // month to be displayed
$ Dd = date ("D"); // Date of the current day // Number of days per month
$ 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 ); // Determine whether it is a leap year
If ($ yyyy % 400 = 0 | $ yyyy % 4 = 0 & $ yyyy % 100! = 0)
{
$ Days [2] = 29;
}
// Judge that the first day of the year is the day of the year.
For ($ I = 1, $ d = 1; $ I <$ mm; $ I ++)
{
$ D + = $ days [$ I];
}
// Obtain the day of the week for the selected month.
$ Week = ($ yyyy-1) + floor ($ yyyy-1)/4)-floor ($ yyyy-1)/100) + floor ($ yyyy-1)/400) + $ d) % 7;
// Calculate the number of rows required to display the calendar of the current month
$ Alldays = $ week + $ days [$ mm];
If ($ alldays % 7 = 0)
{
$ Rows = floor ($ alldays/7 );
}
Else
{
$ Rows = floor ($ alldays/7) + 1;
} // Construct the display calendar Array
$ Dayarray = array ();
For ($ I = 0; $ I <$ week; $ I ++)
{
$ Dayarray [] = "";
}
For ($ I = 1; $ I <$ days [$ mm] + 1; $ I ++)
{
$ Dayarray [] = $ I;
}
// Add Template
Require_once ("wnl.html ")
?> |
|
The following is a calendar template [template in special mode]
Wnl/wnl.html
<! --
<? PHP
//---------------------------------------------------------------------------
// Filename: wnl.html
// Author: Bai Jianping // Description: interface presentation template of the perpetual calendar Program
// Date: 2005-03-18
// Version 1.0
// Copyright: chinux team
//---------------------------------------------------------------------------
// History:
//
// Date Author Modification
//---------------------------------------------------------------------------
// 2005-03-18 Bai Jianping-Create File
//---------------------------------------------------------------------------
//---------------------------------------------------------------------------$ Headtitle = "My Calendar ";
$ Labellastyear = "last year ";
$ Labelnextyear = "next year ";
$ Labellastmonth = "last month ";
$ Labelnextmonth = "Next Month ";
$ Labelyear = "year ";
$ Labelmonth = "month ";
$ Labelthismonth = "this month ";
$ Labelsunday = "day ";
$ Labelmonday = "1 ";
$ Labeltuesday = "2 ";
$ Labelwednesday = "3 ";
$ Labelthursday = "4 ";
$ Labelfriday = "5 ";
$ Labelsaturday = "6 "; 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: #66 CCFF}
Select {border-width: 1px; border-style: solid; border-color: #66 CCFF; 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;
Required bytes opener.doc ument. form1.textdate. value = strdate;
}
</SCRIPT>
</Head> <Body bgcolor = "#000000" type = "codeph" text = "/codeph">
<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;
// Output an optional year
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;
// Output the optional month
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 = 'nextyyy'; 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 the month to be displayed is the month, the date of the day must be highlighted.
If ($ yyyy = date ("Y") & $ Mm = date ("M "))
{
// $ Dayarray [$ week-1 + $ DD] = "<B> <font color =/" # 0000ff/"> ". $ dayarray [$ week-1 + $ DD]. "</font> </B> ";
}
// Display the calendar
For ($ I = 0; $ I <$ rows; $ I ++)
{
Print <EOT
-->
<Tr bgcolor = "# ffffcc">
<! --
EOT;
// Display the calendar
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;
}
// Display the date of the current day
$ 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;
?>
--> |
|
