jQuery date picker plugin v2
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/
實用的月曆 plugin,網頁表單必備工具!
這個月曆除了需要使用 jQuery 之外,還需要一個 date.js,此外,如果在 IE6 使用時,需要避免被下拉選單覆蓋住,直接引用 bgiframe plugin 即可自動處理。先看看一個簡單的範例:
HTML 和 CSS 的原始碼如下:
<input type="text" name="date1" id="date1" class="date-pick" />
<link rel="stylesheet" type="text/css" href="datePicker.css" />
<style type="text/css">
a.dp-choose-date {
float: left;
width: 16px;
height: 16px;
padding: 0;
margin: 5px 3px 0;
display: block;
text-indent: -2000px;
overflow: hidden;
background: url(date_16x16.gif) no-repeat;
}
a.dp-choose-date.dp-disabled {
background-position: 0 -20px;
cursor: default;
}
input.dp-applied {
width: 100px;
float: left;
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="date.js"></script>
<script type="text/javascript" src="jquery.datePicker.js"></script>
JavaScript 的部份則是先透過 jQuery 取得要輸入日期的 <input> Tag,然後套用 datePicker() 即可。這個範例中還把日期的格式修改為 yyyy-mm-dd,比較符合台灣地區的使用習慣:
$(function() {
Date.format = 'yyyy-mm-dd';
$('#date1').datePicker();
});
date picker 預設可輸入的日期為今天以後,如果要讓使用者輸入以前的日期,則需要額外指定 startDate 這個參數:
$(function() {
$('#date2').datePicker({startDate:'1996-01-01'});
});
範例:
以上簡單地示範了 date picker 的用法,其實 date picker 還提供了更多的參數以及自訂事件可供設定或使用,詳情請參考官方網站有更多的說明。 |