jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化's Archiver

wmh 發表於 2008-6-1 14:56

[jQuery] date picker plugin - jQuery 月曆

[img]http://jsgears.com/_icons/famfamfam/folder.gif[/img] jQuery date picker plugin v2
[img]http://jsgears.com/_icons/famfamfam/icon_home.gif[/img][url]http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/[/url]
[img]http://jsgears.com/_icons/famfamfam/comment.gif[/img] 實用的月曆 plugin，網頁表單必備工具!

這個月曆除了需要使用 jQuery 之外，還需要一個 [url=http://jqueryjs.googlecode.com/svn/trunk/plugins/datePicker/v2/demo/date.js]date.js[/url]，此外，如果在 IE6 使用時，需要避免被下拉選單覆蓋住，直接引用 [url=http://jsgears.com/thread-74-1-1.html]bgiframe plugin[/url] 即可自動處理。先看看一個簡單的範例：

[jsg.example]
<input type="text" name="date1" id="date1" class="date-pick" />
<link rel="stylesheet" type="text/css" href="_lib/jquery/plugins/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(_lib/jquery/plugins/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="http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.js"></script>
<script type="text/javascript" src="_lib/jquery/plugins/date.js"></script>
<script type="text/javascript" src="_lib/jquery/plugins/jquery.datePicker.js"></script>
<script type="text/javascript">
$j = jQuery.noConflict();
$j(function() {
  Date.format = 'yyyy-mm-dd';
  $j('#date1').datePicker();
});
</script>
[/jsg.example]

HTML 和 CSS 的原始碼如下：
[code html]
<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>
[/code]

JavaScript 的部份則是先透過 jQuery 取得要輸入日期的 <input> Tag，然後套用 datePicker() 即可。這個範例中還把日期的格式修改為 yyyy-mm-dd，比較符合台灣地區的使用習慣：
[code js]
$(function() {
  Date.format = 'yyyy-mm-dd';
  $('#date1').datePicker();
});
[/code]


date picker 預設可輸入的日期為今天以後，如果要讓使用者輸入以前的日期，則需要額外指定 startDate 這個參數：

[code js]
$(function() {
  $('#date2').datePicker({startDate:'1996-01-01'});
});
[/code]

範例：

[jsg.example]
<input type="text" name="date2" id="date2" class="date-pick" />
<script type="text/javascript">
$j(function() {
  $j('#date2').datePicker({startDate:'1996-01-01'});
});
</script>
[/jsg.example]


以上簡單地示範了 date picker 的用法，其實 date picker 還提供了更多的參數以及自訂事件可供設定或使用，詳情請參考[url=http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/]官方網站[/url]有更多的說明。

hanmin888 發表於 2008-12-12 16:56

請問一下使用方法

如題
我照著上述方式來做
但是卻沒有 那個小圖 可以點選
也就是只有 text 而已 ,沒有旁邊的小圖可以點出來選月曆
我的程式碼如下,請指正,謝謝.
[code]<!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=BIG5">
<title>月曆測試</title>
<!--JavaScript-->
<script type="text/javascript" src="jquery.datePicker-2.1.1.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.min-2.1.1.js"></script>
<script type="text/javascript">
$(function() {   
  Date.format = 'yyyy-mm-dd';   
  $('#date1').datePicker();   
});
</script>  
<!--JavaScript-->
<!--CSS-->
<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>  
<!--CSS-->
</head>
<body>
<input type="text" name="date" id="data1" class="date-pick">

</body>
</html>[/code]

hanmin888 發表於 2008-12-12 17:19

我想我找到原因了

原因應該是 date1 打錯了...囧

:funk:

[[i] 本帖最後由 hanmin888 於 2008-12-12 22:50 編輯 [/i]]

wmh 發表於 2008-12-12 20:22

好像不是耶，我看了一下你的程式，首先 jquery 沒有載入喔，另外 id 似乎打錯了，我改成這樣就可以了：[code html]<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">  [/code]

hanmin888 發表於 2008-12-12 23:04

還是不行

:Q
奇怪了, 還是不行耶...可能是js都沒載入吧...但又看不出哪裡錯..
這次我是照JQuery的官網demo試...[code]<!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=BIG5">   
<title>月曆測試</title>   
<!--JavaScript-->   
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery.datePicker-2.1.1.js"> </script>
<script type="text/javascript" src="date.js"></script>      
<script type="text/javascript">   
$(function() {      
  Date.format = 'yyyy-mm-dd';      
  $('#date1').datePicker();      
});   
</script>     
<!--JavaScript-->   
<!--CSS-->   
<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>     
<!--CSS-->   
</head>   
<body>   
<input type="text" name="date" id="date1" class="date-pick">   
  
</body>   
</html> [/code]

wmh 發表於 2008-12-12 23:32

剛剛試過你的這段程式，大致上都沒問題喔。所以可能再檢查一下你的 local 端是否有這些檔案：
[list]
[*]jquery-1.2.6.min.js
[*]jquery.datePicker-2.1.1.js
[*]date.js
[*]date_16x16.gif
[/list]

hanmin888 發表於 2008-12-13 11:22

沒有圖

date_16x16.gif
我沒有這個圖耶...
所有的圖都沒有,應該要去哪得到這些圖呢?
謝謝

wmh 發表於 2008-12-13 17:33

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

hanmin888 發表於 2008-12-15 15:22

雖然我現在有圖了
但是還是失敗
html部分是抄官網的程式碼, [url=http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerPastDate.html]檢視原始檔[/url]
我基本瀏覽器是 Opera 9.6
我用IE8去跑這個html有出現javascript的錯誤如下[code]網頁指令碼錯誤

使用者代理程式: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB5; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 3.0.04506.648)
時間戳記: Mon, 15 Dec 2008 07:14:48 UTC

訊息: 物件不支援此屬性或方法
行: 588
字元: 6
程式碼: 0
URI: file:///C:/Documents%20and%20Settings/It0009/My%20Documents/下載/javaScript/JQuery/jquery.datePicker-2.1.1.js[/code]執行的Html如下[code]<!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=BIG5">      
<title>月曆測試</title>      
<!--JavaScript-->      
<script type="text/javascript" src="jquery-1.2.6.js"></script>   
<script type="text/javascript" src="date.js"></script>
<script type="text/javascript" src="jquery.datePicker-2.1.1.js"></script>           
<script type="text/javascript">      
$(function() {         
  Date.format = 'yyyy-mm-dd';         
  $('#date1').datePicker();         
});      
</script>        
<!--JavaScript-->      
<!--CSS-->      
<link rel="stylesheet" type="text/css" href="dataPicker.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>   [/code]

[[i] 本帖最後由 hanmin888 於 2008-12-15 15:45 編輯 [/i]]

wmh 發表於 2008-12-15 23:02

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

hanmin888 發表於 2008-12-16 15:02

用了妳的檔案就變正常

換用你的js檔就正常了
關鍵的是那個date.js 不一樣:funk:

kkw 發表於 2009-3-27 21:40

datepicker 取值了04/14/2009
指定日子怎樣不能選取,失效？

yukar 發表於 2009-5-19 19:52

[quote]原帖由 [i]wmh[/i] 於 2008-12-15 23:02 發表 [url=http://jsgears.com/redirect.php?goto=findpost&pid=245&ptid=81][img]http://jsgears.com/images/common/back.gif[/img][/url]
我用 IE8 瀏覽也是正常喔，試試看我打包好的程式... [/quote]

我下載了這個，只能選擇到當前年月份，之前的年月份無法選到，之后的年月份倒是可以。哪里設置？

wmh 發表於 2009-5-19 22:45

預設是不能選取之前日期的，如果要允許可以選取之前的日期，要多給個參數，請參考：
[code js]
$('.date-pick').datePicker({startDate:'01/01/1996'});
[/code]

ironman 發表於 2009-6-25 09:23

請教WMH大
我下載您的壓縮檔後
在test2.html內
有兩段<HTML></HTML>標籤
請問第二段是有何用途嗎
另如果我想改為2009/06/25 斜線的格式
在test2.html頁面內改就好嗎
好像會還原回2009-06-25 的格式ㄝ
謝謝

wmh 發表於 2009-6-25 09:56

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

格式修改可以透過指定：
[code js]
Date.format = 'yyyy/mm/dd';
[/code]

Jarstin 發表於 2009-10-23 14:28

想請問一下,用出來後,但同一個頁面要有二個以上的選單

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

:Q

wmh 發表於 2009-10-24 09:10

[quote]原帖由 [i]Jarstin[/i] 於 2009-10-23 14:28 發表 [url=http://jsgears.com/redirect.php?goto=findpost&pid=854&ptid=81][img]http://jsgears.com/images/common/back.gif[/img][/url]
想請問一下,用出來後,但同一個頁面要有二個以上的選單

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

:Q [/quote]

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

bob120400 發表於 2010-1-29 12:44

感謝大大的分享

想請問一個問題

date.js 裡面的日期 好像不能改成中文

譬如 禮拜一 禮拜二~

另外 可否設定 某天不能選呢?

謝謝~

lcy122 發表於 2010-5-26 15:19

一樣在IE7也可以。 :lol

頁: [1] 2 3

Powered by Discuz! Archiver  © 2001-2009 Comsenz Inc.