快速製作日期選單 -jQuery UI datepicker

我們在製作網頁表單的時候常常會用到填寫日期的地方。
早期我們只能讓使用者填寫完後,再來檢查格式對不對,有了AJAX技術後我們常常會看到下面的畫面:
 



利用萬年曆方式選擇日期,這樣的好處就是使用者終於不用猜我們網站的日期格式了。
這個技術同時會使用到 jquery  jquery-ui  


1.在head貼上

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">script>
這是連結到jquery網站上面的程式路徑,你也可以直接去這個路徑把檔案抓到你的網頁資料夾上。
 
2.貼上javaScript語法
其中我們看到第三行 #birthday 表示這個功能要套用到ID為 birthday 的表單,datepicker裡面代的參數可以在官方網站裡面查到
主要是用來控制細部功能的。
3.建立一個input欄位ID和上面設定相同。
 
 
這樣就大功告成了!
相關網站: 
http://jqueryui.com/demos/datepicker/

留言