在head的部分：
<link rel="stylesheet" type="text/css" href="ui.datepicker.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ui.datepicker.js"></script>
<script type="text/javascript">
jQuery(function($){
$("#input_date").datepicker({dateFormat:'yy-mm-dd'});
});
</script>
在body的部分：
<input type="text" name="date" id="input_date">
上面的 ui.datepicker.css、jquery.js、ui.datepicker.js 三隻程式都可以在jquery的ui下載
或參考這篇
懶人可以直接用官網的程式碼
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" /></p>
</body>
</html>
如果想加個小圖示在旁邊，參數如下：(請自己準備小圖示，或用官網的圖示)
$("#datepicker").datepicker(
showOn:"both",
buttonImage:"images/calendar.gif",
buttonImageOnly:true
);
簡單說明一下， showOn 代表觸發彈跳動作的方式，若值為 both 則不管點文字欄位或是圖示都會觸發， buttonImage 代表你放小圖示的檔案位置， buttonImageOnly 代表只顯示小圖，不然按鈕會出現在圖示後面，很醜。備註：
1. 如果要設定日期的選取限制可以利用兩個屬性 maxDate()（最大可選日期） 與 minDate()（最小可選日期）
例如：我希望使用者只能選 2012-12-25 前的日期
$('.selector').datepicker({maxDate: "2012-12-25"});
或一天前的日期
$( ".selector" ).datepicker({ maxDate: "-1m" });
可參考 官網文件
2. 如果希望 input 只能用點選日期的方式輸入，加上 readonly="readonly" 就可以了。
No comments:
Post a Comment