When we do Web applications, in many cases we need the operator to enter date-type field information such as dates on the page. The usual practice is: <?xml:namespace prefix = o ns = "Urn:schemas-microsoft-com:office:office"/>
1, select the label to choose the date
2, give an input, and define a fixed format, so that operators fill out their own
3. Use the ActiveX Datetimecontroller provided by Microsoft.
However, this method is flawed, although some outrageous data (such as 99 months 88 days) will not appear in 1, validation and background data processing will consume us a lot of time and effort. and an action page if there are more date-type fields, it will certainly bring trouble to users. In 2, users can enter the date of day, there must be outrageous data also exist validation and background processing problems. Microsoft's ActiveX Datetimecontroller is a good thing, but its CLSID "long and smelly" is hard to remember, and many parameters need to be set. If you don't know anything about Microsoft, it's not easy to use. Besides, this ActiveX control is not necessarily installed on everyone's machine. But it gave me a little inspiration when I was doing this date selector. Here are some of the images I'm testing for this date selector.
1. Before date selection
2. In Date selection
3. After the date selection
In combination with the given page I briefly introduce the use of the method, make a page that needs to enter date data (see figure: Before date selection) Click OK button (if you change the OK button to a small icon effect will be better, willing to do a try) when the JSP date selector pops up. We can flip back and forth with the buttons provided in the picture (see Photo: Date selection) or directly from the Drop-down box. The month selection has a circular scrolling feature, which means that the first one months of January are December, the one months after December are January, but do not provide a change in the year of January (pre-January) and December (after January). If you need to be able to modify your source code, it is estimated that 4 lines of work two. I set the year between 1970-2470. If necessary, please make your own changes. Another feature of the JSP date selector is that the alignment with the week corresponds to the daily use of the calendar. The result of the selection is as shown after date selection. The disadvantage is that the Web server is out of service.
The source code is given below:
1, the source code of TESTCALENDAR.JSP
<%@ page contenttype= "text/html; CHARSET=GBK "%>
<title>
Testcalendar
</title>
<script language= "JavaScript" >
var caldatefiled= "";
var indate= "";
function Setdatefield (Datefield)
{
Caldatefield = Datefield;
Indate = Datefield.value;
}
function Mygetdate (selectedDate)
{
Caldatefield.value = selectedDate;
Caldatefield.focus ();
}
</script>
<body>
<form name= "abc" >
Date: <input type= "text" name= "Indate" readonly>
<input type= "button" Name= "OK" value= "to determine" onclick= "Setdatefield (document.abc.indate); Tempstr=window.open (' Iecalendar.jsp ', ' Tony ', ' Dependent=yes,titlebar=no,width=465,height=275,location=no '); Tempstr.moveto ( screen.height-275)/2, (screen.width-475)/2); " >
</form>
</body>
2, the source code of IECALENDAR.JSP
<%@ page contenttype= "text/html; charset=gb2312 "%>
<%@ page import= "Java.util.Calendar"%>
<%@ page import= "Java.util.GregorianCalendar"%>
<%@ page import= "Java.util.Date"%>
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
<link rel= "stylesheet" href= "Images/style.css" type= "Text/css" >
<title>
Iecalendar
</title>
<script language= "JavaScript" >
var daystr= "1";
function Selectdate ()
{
Document.all.calendar.submit ();
}
function Premonth ()
{
if (parseint (document.all.month.value) ==1)
{
window.location= "iecalendar.jsp?year=" +document.all.year.value+ "&month=12";
}
Else
{
window.location= "iecalendar.jsp?year=" +document.all.year.value+ "&month=" + (parseint ( Document.all.month.value)-1%12;
}
}
function Nextmonth ()
{
if (parseint (document.all.month.value) ==11)
{
window.location= "iecalendar.jsp?year=" +document.all.year.value+ "&month=12";
}
Else
{
window.location= "iecalendar.jsp?year=" +document.all.year.value+ "&month=" + (parseint ( Document.all.month.value) +1%12;
}
}
function Preyear ()
{
if (parseint (document.all.year.value) ==1970)
{
Return
}
Else
{
Window.location= "iecalendar.jsp?year=" + (parseint (document.all.year.value)-1) + "&month=" +parseint ( Document.all.month.value);
}
}
function Nextyear ()
{
if (parseint (document.all.year.value) ==2470)
{
Return
}
Else
{
Window.location= "iecalendar.jsp?year=" + (parseint (document.all.year.value) +1) + "&month=" +parseint ( Document.all.month.value);
}
}
function Getday ()
{
return daystr;
}
</script>
<%
int year=0;
int month=0;
int Day=1;
Date Now=new date ();
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
