我們在做web應(yīng)用的時候,在很多情況下都需要操作人員在頁面上輸入日期之類的日期型字段信息。通常的做法是:XML:namespace prefix = o ns = "urn:schemas-microsoft-com:Office:office" />
1、用select標(biāo)簽分別選擇年月日
2、給一個INPUT,并定義一個固定的格式,讓操作人員自己填寫
3、使用MICROSOFT提供的ActiveX DATETIMECONTROLLER。
然而這中方法均有缺陷,在1中雖然不會出現(xiàn)一些離譜的數(shù)據(jù)(如99月88日),但有效性驗證和后臺數(shù)據(jù)處理將消耗我們不少的時間和精力。而且一個操作頁面如果有較多個日期型字段,一定會給使用者帶來困擾。在2中用戶可以任意錄入年月日,一定會出現(xiàn)離譜的數(shù)據(jù)也存在有效性驗證和后臺處理等問題。MICROSOFT的ACTIVEX DATETIMECONTROLLER是個好東西,不過它的CLSID“又長又臭”很難記住 ,還有很多參數(shù)需要設(shè)置。如果對MICROSOFT的東西不了解,使用起來也方便不到哪兒去。再說不一定每個人的機(jī)器上都安裝了這個ACTIVEX控件。但是我在做這個日期選擇器的時候它給了我不小的啟發(fā)。下面是我在測試這個日期選擇器的一些畫面。
1.日期選擇前
JSP日期選擇器選擇前.GIF" align=baseline border=0>
創(chuàng)新互聯(lián)主營義馬網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,成都app開發(fā),義馬h5小程序制作搭建,義馬網(wǎng)站營銷推廣歡迎義馬等地區(qū)企業(yè)咨詢
2.日期選擇中
3.日期選擇后
結(jié)合給出的頁面我簡單的介紹一下使用方法,做一個需要輸入日期數(shù)據(jù)的頁面(見圖:日期選擇前)在點擊確定按鈕(如果將確定按鈕換成一個小圖標(biāo)效果會更好,愿意動手的可以試一試)的時候會彈出jsp日期選擇器。我們可以用畫面(見圖:日期選擇中)中提供的按鈕來前后翻,也可以從下拉框中直接選擇。月份選擇有循環(huán)滾動功能給,即1月的前一個月是12月,12月的后一個月是1月,但不提供逢1月(前一月)和12月(后一月)時的年份的變化。如果有需要可以自己在源代碼上修改,估計也就是4行的工作兩。年份我設(shè)置在1970-2470之間。如果有需要,請自己動手修改吧。JSP日期選擇器的另一個特點時與星期的對齊是與日常使用的日歷對應(yīng)的。選擇后的結(jié)果如圖“日期選擇后” 。不足之處是脫離了WEB SERVER不能使用。
下面給出源代碼:
1、testCalendar.jsp的源代碼
<%@ page contentType="text/html; charset=GBK" %>
testCalendar
var calDateFiled="";
var inDate="";
function setDateField(dateField)
{
calDateField = dateField;
inDate = dateField.value;
}
function myGetDate(selectedDate)
{
calDateField.value = selectedDate;
calDateField.focus();
}
日期:
2、IECalendar.jsp的源代碼
<%@ page contentType="text/html; charset=GB2312" %>
<%@ page import="java.util.Calendar" %>
<%@ page import="java.util.GregorianCalendar" %>
<%@ page import="java.util.Date" %>
IECalendar
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;
}
<%
int year=0;
int month=0;
int day=1;
Date now=new Date();
Calendar calendar=new GregorianCalendar();
calendar.setTime(now);
if((request.getParameter("year")!=null))
{
if((!request.getParameter("year").equals(""))||(!request.getParameter("year").trim().equals("")))
{
year=Integer.parseInt(request.getParameter("year"));
}
else
{
year=calendar.get(calendar.YEAR);
}
}
else
{
year=calendar.get(calendar.YEAR);
}
if((request.getParameter("month")!=null))
{
if((!request.getParameter("month").equals(""))||(!request.getParameter("month").trim().equals("")))
{
month=Integer.parseInt(request.getParameter("month"));
}
else
{
month=Integer.parseInt(request.getParameter("month"));
}
}
else
{
month=calendar.get(calendar.MONTH)+1;
}
// if((request.getParameter("day")!=null))
// {
// if((!request.getParameter("day").equals(""))||(!request.getParameter("day").trim().equals("")))
// {
// day=Integer.parseInt(request.getParameter("day"));
// }
// else
// {
// day=Integer.parseInt(request.getParameter("day"));
// }
// }
// else
// {
// day=calendar.get(calendar.DAY_OF_MONTH);
// }
%>
月 份 |
<% for(int i=1;i<=12;i++) { %>
<% } %>
| 年 份 |
<% for(int i=0;i<=500;i++) { %>
<% } %>
|
onclick="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); }"> onclick="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; }">
onclick="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; }"> onclick="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); }"> |
星期日 | 星期一 | 星期二 | 星期三 | 星期四 | 星期五 | 星期六 |
);window.close();"> > "><%=days[i*7+j]%> |
注意事項:請不要單獨使用IECalendar.jsp,應(yīng)為會出錯,必須與另外一個包含了
var calDateFiled="";
var inDate="";
function setDateField(dateField)
{
calDateField = dateField;
inDate = dateField.value;
}
function myGetDate(selectedDate)
{
calDateField.value = selectedDate;
calDateField.focus();
}
并由
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);"
打開的窗口中才能正常工作。
有什么疑問和不足之處請發(fā)EMail通知我。
NAME:東尼
email:tonyzhangcn@sohu.com
文章題目:用JSP制作的日期選擇器(轉(zhuǎn))
分享網(wǎng)址:http://m.rwnh.cn/article28/ipjhcp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站設(shè)計、Google、網(wǎng)站維護(hù)、企業(yè)建站、ChatGPT、軟件開發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)