JQUERY UI使用者介面設計

第八章

日期選擇器

日期選擇器讓使用者能輕易挑選要輸入的日期，同時考慮各地區的語言差異（日期與月

份的名稱、日期格式等等）。

日期選擇器的基本原則

假設我們想寫 HTML 碼顯示圖 8-1 這樣的月曆。當使用者點選輸入欄位想輸入日期的時

候，這個月曆就會出現。月份可以用月曆左右上角的箭頭捲動，如果您點選一個日期的

話，就會將這個日期自動填入輸入框。

以下是 jQuery UI 慣例的 HTML 寫法，包含在

<script>

標籤內呼叫

datepicker()

方法。

我們使用

<input>

元素，並為它指定

date

ID，這就是輸入日期的欄位。在這個例子裡，

月曆在使用者點選欄位的時候會自動出現在欄位以下。若使用者點選其他地方、或是點

選某個日期的話，月曆就會自動隱藏（點選日期的時候還會自動將日期填入欄位）：

<script src = jquery.js></script>

<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>

<link rel=stylesheet type=text/css

href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />

<h3>Click to select a date :</h3>

<input id=date />

<script>

$("input#date").datepicker ();

</script>