使用說明範例 date picker plugin - jQuery 月曆
jQuery date picker plugin v2http://jsgears.com/_icons/famfamfam/icon_home.gifhttp://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/
http://jsgears.com/_icons/famfamfam/comment.gif 實用的月曆 plugin，網頁表單必備工具!
這個月曆除了需要使用 jQuery 之外，還需要一個 date.js，此外，如果在 IE6 使用時，需要避免被下拉選單覆蓋住，直接引用 bgiframe plugin 即可自動處理。先看看一個簡單的範例：
HTML 和 CSS 的原始碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>月曆測試</title>
<!--JavaScript-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.js"></script>
<script type="text/javascript" src="date.js"></script>
<script type="text/javascript" src="jquery.datePicker.js"></script>
<script type="text/javascript">
$(function() {
Date.format = 'yyyy-mm-dd';
$('#date1').datePicker();
});
</script>
<!--JavaScript-->
<!--CSS-->
<link rel="stylesheet" type="text/css" href="jquery.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>
<!--CSS-->
</head>
<body>
<input type="text" name="date" id="date1" class="data-pick">
</body>
</html>
以上簡單地示範了 date picker 的用法，其實 date picker 還提供了更多的參數以及自訂事件可供設定或使用，詳情請參考官方網站有更多的說明。
附上範例
謝謝分享 樓上的稍等啦 樓主，支持！
頁:
[1]