JQuery的小日曆

在撰寫html的日期選擇時，常會要求使用者使鍵入正確的日期格式，這樣才會方便後續的處理，例如進行MySQL的查詢，這時如果只是使用html中單純的text是難以規範使用者的輸入內容的，所以通常我們都會採取不讓使用者直接輸入而是用選擇的方式輸入日期資料，通常有下例幾種方式:

1. 直接把年、月、日拆開來，分別用不同的下拉式選單讓使用者選取正確的數字，不過這種方式使用者能選擇的值是有限的，你沒有提供的數字就無法選擇。
2. 以直觀的方式使用日曆來讓使用者選擇日期，使用者會看到日曆並直接在上面選擇。

因為JQuery十分方便，只要引用進JSP中就可以直接使用，而且日曆外觀也不錯，所以在這裡就以JQuery的小日曆為例子，來說明如實現第2種的日曆方式：

1. 首先要在html的head中把要使用的CSS樣式、JQuery和JQuery UI引用進來，如以下的前三行程式碼，第四行程式碼是中文化的功能，不加入這行時日曆是呈現英文的界面，加入後就能顯示中文介面的日曆：

<!-- 使用 jQuery -->
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>

<!-- 使用 jQuery Datepicker的中文化-->
<script type="text/javascript" src="../jquery/jquery.ui.datepicker-zh-TW.js"></script>

2. 接著在html的body中，給要讓使用者打入日期的text一個id，例如dateChooser：

<input type='text' name='whenToSet' id="dateChooser">

3. 然後加入日曆功能的JavaScript程式碼，裡面會用到datepicker()的方法：
<!-- 使用 jQuery 的 Datepicker -->

<script language="JavaScript">
        $(document).ready(
                function() {
                    $("#dateChooser").datepicker();
                }
        );
</script>

4. 這樣就大功告成了，當使用者點擊text時，日曆就會自動跑出來給使用者選擇，選好後text中自動就會出現正確的日期格式了，日曆的長相就像下面這樣(當然，這是預設，需要客製化的話也是沒有問題的)。

英文版的小日曆

中文版的小日曆