[jQuery] date picker plugin - jQuery 月曆 jQuery, datePicker, 月曆, picker, date

wmh

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 還提供了更多的參數以及自訂事件可供設定或使用，詳情請參考官方網站有更多的說明。

wmh

好像不是耶，我看了一下你的程式，首先 jquery 沒有載入喔，另外 id 似乎打錯了，我改成這樣就可以了：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.js"></script>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/svn/trunk/plugins/datePicker/v2/demo/date.js"></script>
<script type="text/javascript" src="jquery.datePicker.js"></script>
<script type="text/javascript">
$(function() {
  Date.format = 'yyyy-mm-dd';
  $('#date1').datePicker();  //這邊是 date1
});
</script>
...
<!-- 這邊也要改成 date1 -->
<input type="text" name="date" id="date1" class="date-pick">  

wmh

剛剛試過你的這段程式，大致上都沒問題喔。所以可能再檢查一下你的 local 端是否有這些檔案：

• jquery-1.2.6.min.js
  
• jquery.datePicker-2.1.1.js
  
• date.js
  
• date_16x16.gif
  

wmh

你可以直接把這個網頁的圖另存，或者到這邊找更多圖：
http://www.cachefile.net/graphics/ui/aspnet/

wmh

我用 IE8 瀏覽也是正常喔，試試看我打包好的程式...

wmh

預設是不能選取之前日期的，如果要允許可以選取之前的日期，要多給個參數，請參考：

$('.date-pick').datePicker({startDate:'01/01/1996'});

wmh

test2.html 似乎不小心多複製了一份相同的內容，所以請先刪除多餘的一半。

格式修改可以透過指定：

Date.format = 'yyyy/mm/dd';

wmh

原帖由 Jarstin 於 2009-10-23 14:28 發表
想請問一下,用出來後,但同一個頁面要有二個以上的選單

但第二個之後都無法顯示,請問為什麼呢

有沒有你的範例可以看呢？

wmh

其實只是多個參數，加在你原本的程式內即可。

wmh

回復 23# 9614038

hidden 的欄位就看不到了吧！？