12345
返回列表 發帖
wmh

Rank: 9Rank: 9Rank: 9

帖子
763 
主題
210 
精華
2 
積分
232 
威望
232  
金錢
0  
1# 跳轉到 » 倒序看帖
打印
tT
發表於 2008-6-1 14:56 | 只看該作者

[jQuery] date picker plugin - jQuery 月曆

jQuery, datePicker, 月曆, picker, date
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 還提供了更多的參數以及自訂事件可供設定或使用，詳情請參考官方網站有更多的說明。
收藏 分享
To infinity and beyond!

hanmin888

Rank: 1

帖子
15 
主題
4 
精華
0 
積分
5 
威望
5  
金錢
0  
2#
發表於 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>

TOP

hanmin888

Rank: 1

帖子
15 
主題
4 
精華
0 
積分
5 
威望
5  
金錢
0  
3#
發表於 2008-12-12 17:19 | 只看該作者

我想我找到原因了

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



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

TOP

wmh

Rank: 9Rank: 9Rank: 9

帖子
763 
主題
210 
精華
2 
積分
232 
威望
232  
金錢
0  
4#
發表於 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">  
To infinity and beyond!

TOP

hanmin888

Rank: 1

帖子
15 
主題
4 
精華
0 
積分
5 
威望
5  
金錢
0  
5#
發表於 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>

TOP

wmh

Rank: 9Rank: 9Rank: 9

帖子
763 
主題
210 
精華
2 
積分
232 
威望
232  
金錢
0  
6#
發表於 2008-12-12 23:32 | 只看該作者
剛剛試過你的這段程式，大致上都沒問題喔。所以可能再檢查一下你的 local 端是否有這些檔案：

  • jquery-1.2.6.min.js
  • jquery.datePicker-2.1.1.js
  • date.js
  • date_16x16.gif
To infinity and beyond!

TOP

hanmin888

Rank: 1

帖子
15 
主題
4 
精華
0 
積分
5 
威望
5  
金錢
0  
7#
發表於 2008-12-13 11:22 | 只看該作者

沒有圖

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

TOP

wmh

Rank: 9Rank: 9Rank: 9

帖子
763 
主題
210 
精華
2 
積分
232 
威望
232  
金錢
0  
8#
發表於 2008-12-13 17:33 | 只看該作者
你可以直接把這個網頁的圖另存，或者到這邊找更多圖：
http://www.cachefile.net/graphics/ui/aspnet/
To infinity and beyond!

TOP

hanmin888

Rank: 1

帖子
15 
主題
4 
精華
0 
積分
5 
威望
5  
金錢
0  
9#
發表於 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 編輯 ]

TOP

wmh

Rank: 9Rank: 9Rank: 9

帖子
763 
主題
210 
精華
2 
積分
232 
威望
232  
金錢
0  
10#
發表於 2008-12-15 23:02 | 只看該作者
我用 IE8 瀏覽也是正常喔，試試看我打包好的程式...
附件: 您需要登錄才可以下載或查看附件。沒有帳號？註冊
To infinity and beyond!

TOP

12345
返回列表 回復 發帖