發佈日期：
分類：
如何使用jQuery及jQuery UI‧建立日曆選單
圖像式選擇日期的好處，就是不會容易輸入錯誤的格式。利用jQuery及jQuery UI，便可輕易做出日曆選單效果。
01. jQuery UI在版本1.8.13，包含了31個元件，您可以一次過在jQuery UI下載所有元件，也可以根據您自己需要，下載只需用到的其中一個元件。
02. 今次測試，只下載datepicker元件，版本為1.8.13。jQuery會使用1.6.1版本。
03. jQuery UI，除包含js檔案外，另外也包括css檔案。只要載入相關檔案，再更改css內容，便可輕易做到您需要的效果。(測試效果)
04. 而datepicker本身，亦可設定不同選項(option)，如：
changeMonth: true時，可更改月份；
changeYear: true時，可更改年份；
dateFormat: ‘yy-mm-dd’時，可更改日期格式；
maxDate: ‘+3m +3w’時，可更改相對今天，最大可選擇日期；
minDate: ‘-3m -3w’時，可更改相對今天，最細可選擇日期；
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="jquery-ui-1.8.13.datepicker.css">
<script src="jquery-1.6.1.min.js"></script>
<script src="jquery-ui-1.8.13.datepicker.min.js"></script>
</head>
<body>
<div class="demo">
<p>Date: <input id="datepicker" type="text"></p>
</div>
<script>
$(function() {
$( "#datepicker" ).datepicker({ changeMonth: true, changeYear: true, dateFormat: 'yy-mm-dd', maxDate: '+3m +3w', minDate: '-3m -3w' });
});
</script>
</body>
</html>
註：jQuery版本為1.6.1，jQuery UI datepicker版本為1.8.13。
發佈留言