使用說明範例 date picker plugin - jQuery 月曆

woff · 發表於 2011-6-23 19:26:39

jQuery date picker plugin v2

實用的月曆 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>
<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>
<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>
</head>
<body>
<input type="text" name="date" id="date1" class="data-pick">
</body>
</html>

複製代碼

以上簡單地示範了 date picker 的用法，其實 date picker 還提供了更多的參數以及自訂事件可供設定或使用，詳情請參考官方網站有更多的說明。

附上範例

unknowitem · 發表於 2012-2-28 00:42:39

謝謝分享

qpwoei · 發表於 2012-2-28 00:55:21

樓上的稍等啦

Sammi · 發表於 2012-2-28 00:53:59

樓主，支持！

帳號		自動登錄		找回密碼
密碼				註冊

[教學] 使用說明範例 date picker plugin - jQuery 月曆