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

標題: [jQuery] date picker plugin - jQuery 月曆 [打印本頁]

作者: wmh 時間: 2008-6-1 14:56 標題: [jQuery] date picker plugin - jQuery 月曆

jQuery date picker plugin v2

http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/

實用的月曆 plugin，網頁表單必備工具!

這個月曆除了需要使用 jQuery 之外，還需要一個 date.js，此外，如果在 IE6 使用時，需要避免被下拉選單覆蓋住，直接引用 bgiframe plugin 即可自動處理。先看看一個簡單的範例：

[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 的原始碼如下：

<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'});
});

範例：

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

作者: hanmin888 時間: 2008-12-12 16:56 標題: 請問一下使用方法

如題
我照著上述方式來做
但是卻沒有那個小圖可以點選
也就是只有 text 而已 ,沒有旁邊的小圖可以點出來選月曆
我的程式碼如下,請指正,謝謝.

<!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>

作者: hanmin888 時間: 2008-12-12 17:19 標題: 我想我找到原因了

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

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

作者: wmh 時間: 2008-12-12 20:22

好像不是耶，我看了一下你的程式，首先 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">

作者: hanmin888 時間: 2008-12-12 23:04 標題: 還是不行

奇怪了, 還是不行耶...可能是js都沒載入吧...但又看不出哪裡錯..
這次我是照JQuery的官網demo試...

<!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>

作者: wmh 時間: 2008-12-12 23:32

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

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

作者: hanmin888 時間: 2008-12-13 11:22 標題: 沒有圖

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

作者: wmh 時間: 2008-12-13 17:33

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

作者: hanmin888 時間: 2008-12-15 15:22

雖然我現在有圖了
但是還是失敗
html部分是抄官網的程式碼, 檢視原始檔
我基本瀏覽器是 Opera 9.6
我用IE8去跑這個html有出現javascript的錯誤如下

網頁指令碼錯誤

使用者代理程式: 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

執行的Html如下

<!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>

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

作者: wmh 時間: 2008-12-15 23:02

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

作者: hanmin888 時間: 2008-12-16 15:02 標題: 用了妳的檔案就變正常

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

作者: kkw 時間: 2009-3-27 21:40

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

作者: yukar 時間: 2009-5-19 19:52

原帖由 wmh 於 2008-12-15 23:02 發表
我用 IE8 瀏覽也是正常喔，試試看我打包好的程式...

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

作者: wmh 時間: 2009-5-19 22:45

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

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

作者: 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 似乎不小心多複製了一份相同的內容，所以請先刪除多餘的一半。

格式修改可以透過指定：

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

作者: Jarstin 時間: 2009-10-23 14:28

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

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

作者: wmh 時間: 2009-10-24 09:10

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

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

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

作者: bob120400 時間: 2010-1-29 12:44

感謝大大的分享

想請問一個問題

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

譬如禮拜一禮拜二~

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

謝謝~

作者: lcy122 時間: 2010-5-26 15:19

一樣在IE7也可以。

作者: artie0924 時間: 2010-7-26 09:32

各位大大你們好，
我想請教一下，我希望能解除它只能選擇今天以後的日期

$(function() {
$('#date2').datePicker({startDate:'1996-01-01'});
});

這一段程式碼要放在哪裡?

作者: wmh 時間: 2010-7-26 23:31

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

作者: 9614038 時間: 2010-8-3 23:51

請問大大，我要如何降點選的月曆的值，傳送到下一個網頁去接收呢?

以下是我自己寫的，不過無法成功傳送值到下一個網頁!!!
<!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>

<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({
startDate:'1996-01-01'
});
});  </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>

<form name="form1" method="post" action="test4.php">
<input type="hidden" name="date1" id="date1" value="<? echo $date1 ?>" >

<input type="image" src="go.gif" border="0"  >

</form>
</body>
</html>

作者: wmh 時間: 2010-8-4 00:47

回復 23# 9614038

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

作者: 9614038 時間: 2010-8-4 02:23

嗯!!!網頁上看不到有hidden的欄位!!
為什麼? text會在網頁上出現欄位，hidden也會在網頁上出現欄位??

要怎麼改才能將我選的日期的值，傳送到test4.php這網頁去呢?

作者: wmh 時間: 2010-8-4 07:41

回復 25# 9614038

只要看得到欄位，選得到日期，應該就可以把值往 php 送了吧。
所以你目前問題是在哪呢？

作者: 9614038 時間: 2010-8-4 09:30

原本版大給的原始碼是!!將選到的日期顯示在input type="text"上，而我想要的是能值將姜選到的日期
傳送到另一個網頁去接收，我用form把它框起來，再將text改成hidden，網頁上呈現出來的，只有可以點選到月曆的日期，但是按送出，
並不會將植代過去另一個網頁上!，而且原本的網頁上也不會出現像text還有出現欄位。是改成hidden就不會出現欄位嗎?我程式碼如上面所po~

請版大解答~謝謝

作者: wmh 時間: 2010-8-5 00:02

回復 27# 9614038

改成 hidden 應該是會有問題吧，月曆元件應該無法正常運作。
但是為什麼要改成 hidden 呢？

作者: 9614038 時間: 2010-8-5 09:16

因為我想直接將選擇的日期直接傳送到下一個網頁，不想讓它顯示在text box裡面，
可是我以為改成hidden就行，後來月曆就不能使用了!!有什麼辦法可以直接將選擇
的日期直接傳送另一個網頁，去接收值(選擇的日期)嗎?

作者: wmh 時間: 2010-8-6 00:11

回復 29# 9614038

你可以參考一下官方的範例，有 inline 的用法可以參考：
http://www.kelvinluck.com/assets ... lineDatePicker.html

在 dateSelected 後，把值填到你的 hidden 欄位即可

作者: 9614038 時間: 2010-8-9 15:56

需要將原本的function(如下)拿掉嗎?
$(function() {
Date.format = 'yyyy-mm-dd';
$('#date1').datePicker({
startDate:'1996-01-01'
});
});

貼上官方這個function(如下)嗎?
$(function()
{
$('.turn-me-into-datepicker')
.datePicker({inline:true})
.bind(
'dateSelected',
function(e, selectedDate, $td)
{
console.log('You selected ' + selectedDate); ps.hidden是要寫在哪一段 }
);
});

請大大解答

作者: wmh 時間: 2010-8-11 07:28

回復 31# 9614038

沒錯，就在你標注紅色的那一段。
就把值給填入你的 hidden 欄位即可。

$("#date1").val(selectedDate);

作者: 9614038 時間: 2010-8-11 19:41

console.log('You selected ' + selectedDate); 直接將這段語法換成$("#date1").val(selectedDate); 是嗎??

原本的這段語法呢? $(function() {
Date.format = 'yyyy-mm-dd';
$('#date1').datePicker({
startDate:'1996-01-01'
});
});

要保留嗎?

若刪除原本這段語法，月曆的圖示就不會出現了!!

可以請版大貼完整的程式語法給我嗎??

作者: wmh 時間: 2010-8-12 08:16

回復 33# 9614038

有些比較基礎的東西你可能要自己先 study 一下喔。
datePicker() 的初始化當然只需要做一次，但是參數要給正確的。

作者: 9614038 時間: 2010-8-14 17:39

板大有辦法將Sun Aug 8 00:00:00 UTC+0800 2010
轉換成2010/08/08 這種格式嗎?

Funtion內也有輸入Date.format = 'yyyy/mm/dd';
不過送出至test4.php，還是顯示範例的這種格式 ( Sun Aug 8 00:00:00 UTC+0800 2010 )

$(function()
{
Date.format = 'yyyy/mm/dd';
$('.turn-me-into-datepicker')
.datePicker({inline:false, startDate:'1996-01-01'})
.bind(
'dateSelected',
function(e, selectedDate, $td)
{
//console.log('You selected ' + selectedDate);
$("#setday").val(selectedDate);
}
);
});

作者: wmh 時間: 2010-8-15 00:20

回復 35# 9614038

selectedDate 是 JavaScript 的 Date 物件，所以如果直接轉成字串就會是你看到的那樣一串。
有兩種方式可以處理，一種是在存到 hidden 前，用 JavaScript Date 相關的 function 轉為你要的格式，

//這邊還需要自己再處理格式
var Y = selectedDate.getFullYear();
var m = selectedDate.getMonth() + 1;
var d = selectedDate.getDay();
$("#setday").val(Y + "/" + m + "/" + d);

另一種方式是先存成 timestamp，到 php 後再用 date() 轉為你要的格式。

$("#setday").val(selectedDate.getTime() / 1000);

$date = date("Y/m/d", $setday);

作者: chs965033 時間: 2013-7-27 01:01

板大你好雖然發布時間離現在有點久遠
剛好需要您這個功能想請問一下如果我想要限制選取該如何設定呢?
例如：當日起的兩天內不能點選日期
2013.7.27 在加上48hr 以內的日期都不能選取

麻煩教導一下因為專長不是這方面但這功能對我來說蠻重要的感謝

作者: wmh 時間: 2013-7-27 02:15

回復 37# chs965033

用本文所提到的 date.js 很容易可以把日期指定為兩天後。

$('#date').datePicker({startDate: new Date().addDays(2).toISOString().substr(0, 10) });

作者: chs965033 時間: 2013-7-28 00:32

抱歉阿
可能是我講得不好
我是需要限制當日起的兩天不能點選
例如 7/28號那29 30 就不能點選之後的日期就可以點選

作者: wmh 時間: 2013-7-28 22:47

回復 39# chs965033

那就是加三天，上面的範例addDays(2) 改成 addDays(3) 即可

作者: chs965033 時間: 2013-7-29 14:07

那這段要加在date.js的哪裡呢?
加上去之後都沒反應.

作者: ruby1080 時間: 2014-2-19 12:01

版大您好:

我想請問一點問題
以下是我部分的程式:
1. <script src="../js/jquery-1.10.2.min.js" type="text/javascript"></script>
2. <script src="../js/nav.js" type="text/javascript"></script>
3. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.js"></script>
4. <script src="../js/date.js" type="text/javascript"></script>
5. <script src="../js/jquery.datePicker.js" type="text/javascript"></script>
---------------------------------------------
1. 及 3. 應該是一樣的吧?
但是去除3.之後月曆卻不能用了

但如果1~5放入，反而是nav.js的功能無效了

為什麼呢?請指點><

作者: ruby1080 時間: 2014-2-19 12:14

月曆似乎一定要用jquery-1.2.6.js版本

......冏了

歡迎光臨 jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化 (http://jsgears.com/)