web| Date Selection
[Preface]
In the development of web structure program, date data can be entered in many ways in form, which is commonly used in:
1, in the text box so that users in accordance with the provisions of the date format directly input. This method is the simplest, but the user is very cumbersome to use, and programmers also in the background to enter the date of the data validation, so appear very clumsy;
2, with the Drop-down list of years, months, days by the user selected input. This method is more troublesome, user operation seems to be more convenient, but every date input requires programmers in the background to the year, month, days one by one cycle list, and before or after the user input or to the date information validation, so this method is also not taken;
3, with the ActiveX Calendar control, input in the foreground. This approach is convenient, but the only downside is the most fatal weakness: the need for each client to have an ActiveX control installed.
Recently, the author used ASP combined with JavaScript, developed such a simulation of the control-style date selector. User action is more intuitive, more convenient, program background implementation can be easy to call each time, without requiring the client to install any programs.
Here, the source code to contribute to share with you.
[principle]
Use the page to call the date selector by opening the custom window, and pass the Formname,filedname element attribute in the page to the date selector. In the date selector, using ASP to calculate and display the calendar in the background, the user selects the date value back to use the filed.value of the page, and finally automatically closes the pop-up window to complete the selection.
[source program]
1, sample.htm (using the page)
2, calendar.asp (date selector program)
1, sample.htm
========================================================
<title>calendar sample</title>
<body>
<form method= "POST" action= "sample.htm" name= "Sample" >
<b><font face= "Arial" >Sample</font></b><p>
<font face= "Arial" ><span style= "FONT-SIZE:9PT; Font-weight:
>date: </span>
</font><input type= "text" name= "date" size= "ten" readonly>
<a href= "#SelectDate"
onclick= "JavaScript:window.open" (' Calendar.asp?form=sample&field=date '
, ' ', ' Directorys=no,toolbar=no,status=no,menubar=no,scrollbars=no,resi
zable=no,width=190,height=140 '); " >
height= "></a></p>"
<p><input type= "Submit" value= "Submit" Name= "B1" ></p>
</form>
</body>
===========================================================
2, calendar.asp
===========================================================
<%
' WEB Calendar
' By Chaiwei 2002-7-31
'--------------------------------
' Month name definition
Dim Month_name (12)
Month_name (1) = "January"
Month_name (2) = "February"
Month_name (3) = "March"
Month_name (4) = "April"
Month_name (5) = "May"
Month_name (6) = "June"
Month_name (7) = "July"
Month_name (8) = "August"
Month_name (9) = "September"
Month_name (Ten) = "October"
Month_name (one) = "November"
Month_name (a) = "December"
' Year processing, the default is the current year of the server
If Request.QueryString ("year") <> "then"
Year_var=cint (Request.QueryString ("Year"))
Else
Year_var=year (date ())
End If
' Last year, next year ' assignment
Previous_year=year_var-1
Next_year=year_var+1
' Month processing, the default is the current month of the server
If Request.QueryString ("Month") <> "" Then
Month_var=cint (Request.QueryString ("Month"))
Else
Month_var=month (date ())
End If
' Last month, next month ' assignment
If Month_var<=1 Then
Next_month=month_var+1
Previous_month=1
Else
If Month_var>=12 Then
Next_month=12
Previous_month=month_var-1
Else
Next_month=month_var+1
Previous_month=month_var-1
End If
End If
' Current days ' positioning calculation
First_day=dateserial (year_var,month_var,1)
Current_day=first_day-weekday (First_day) +2
%>
<title>Calendar</title>
<script language= "JavaScript" >
Front-End Date selection function
function pick (v) {
Window.opener.document.<%=request.querystring ("form")%>.<%=request.qu
Erystring ("field")%>.value=v;
Window.close ();
return false;
}
</Script>
<style>
<!--
. Page &nb
