用JSP製作的日期選取器_

用JSP製作的日期選取器__JSP

最後更新：2018-07-20 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

我們在做web應用的時候，在很多情況下都需要操作人員在頁面上輸入日期之類的日期型欄位資訊。通常的做法是：<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />

1、用SELECT標籤分別選擇年月日

2、給一個INPUT，並定義一個固定的格式，讓操作人員自己填寫

3、使用MICROSOFT提供的ACTIVEX DATETIMECONTROLLER。

然而這中方法均有缺陷，在1中雖然不會出現一些離譜的資料（如99月88日），但有效性驗證和後台資料處理將消耗我們不少的時間和精力。而且一個操作頁面如果有較多個日期型欄位，一定會給使用者帶來困擾。在2中使用者可以任意錄入年月日，一定會出現離譜的資料也存在有效性驗證和幕後處理等問題。MICROSOFT的ACTIVEX DATETIMECONTROLLER是個好東西，不過它的CLSID“又長又臭”很難記住，還有很多參數需要設定。如果對MICROSOFT的東西不瞭解，使用起來也方便不到哪兒去。再說不一定每個人的機器上都安裝了這個ACTIVEX控制項。但是我在做這個日期選取器的時候它給了我不小的啟發。下面是我在測試這個日期選取器的一些畫面。

1．日期選擇前

2.日期選擇中

3.日期選擇後

結合給出的頁面我簡單的介紹一下使用方法，做一個需要輸入日期資料的頁面（見圖：日期選擇前）在點擊確定按鈕（如果將確定按鈕換成一個小表徵圖效果會更好，願意動手的可以試一試）的時候會彈出jsp日期選取器。我們可以用畫面（見圖：日期選擇中）中提供的按鈕來前後翻，也可以從下拉框中直接選擇。月份選擇有迴圈滾動功能給，即1月的前一個月是12月，12月的後一個月是1月，但不提供逢1月（前一月）和12月（後一月）時的年份的變化。如果有需要可以自己在原始碼上修改，估計也就是4行的工作兩。年份我設定在1970－2470之間。如果有需要，請自己動手修改吧。JSP日期選取器的另一個特點時與星期的對齊是與日常使用的日曆對應的。選擇後的結果如圖“日期選擇後” 。不足之處是脫離了WEB SERVER不能使用。

下面給出原始碼：

1、testCalendar.jsp的原始碼

<%@ page contentType="text/html; charset=GBK" %>

<html>

<head>

<title>

testCalendar

</title>

var calDateFiled="";

var inDate="";

function setDateField(dateField)

{

calDateField = dateField;

inDate = dateField.value;

}

function myGetDate(selectedDate)

{

calDateField.value = selectedDate;

calDateField.focus();

}

</script>

</head>

<body>

日期:<input type="text" name="indate" readOnly>

</form>

</body>

</html>

2、IECalendar.jsp的原始碼

<%@ page contentType="text/html; charset=GB2312" %>

<%@ page import="java.util.Calendar" %>

<%@ page import="java.util.GregorianCalendar" %>

<%@ page import="java.util.Date" %>

<html>

<head>

<title>

IECalendar

</title>

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>

</head>

int year=0;

int month=0;

int day=1;

Date now=new Date();

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More