【卜維丰】JavaScript 日曆

JavaScript 日曆

1/18 10'

JavaScript 日曆，隨便 Google 一下，總有個十個八個，例如這裡，就幫使用者網羅了不少作品，有免費的，也有商業版的。

這幾年各式 Javascript API/Library 多了，日曆也幾乎是標準配備，像 YUI 2 : Calendar 、jQuery Datepicker 或 mooTools Calendar 等。這些作品都相當方便好用。不過我個人偏愛的是由 HTMLArea 作者 Mishoo 所提供的 JSCalendar 。目前的版本別是第二代的 1.7 版。固定式的外觀看起來像是：

選取式的操作則像：

使用起來也相當方便，首先，到官網下載最新版本。

解開壓縮檔，預設的文件夾名稱是 JSCal2-1.7。文件夾結構如下：

jscalendar files

步驟一：連結必要檔案

jscal2.js 是主要程式檔，而 b5.js 則是語系檔，官網下載的壓縮包中沒有附上正體中文版，我改了一個，可以按這裡下載(UTF-8 、BIG5 )。基本的 CSS 樣式則為 jscal2.css，有了這三個檔案，基本就也就可以使用了。

如果你想美化一點，可以加入圓角設定，以及套用不同面板，在檔案結構中 CSS 目錄下，除了 img 文件夾是存放圖檔以外，每個資料夾都有一份樣式，加入連結即可，例如：

觸發式設計

<input type="text" id="date" name="date" size="10" readonly> <input type="button" value="..." id="BTN" name="BTN"> <script type="text/javascript"> new Calendar({ inputField: "date", dateFormat: "%Y/%m/%d", trigger: "BTN", bottomBar: true, weekNumbers: true, showTime: 24, onSelect: function() {this.hide();} }); </script>

常用設定是：

建立新的 Calendar 物件。
對 Calendar 物件初值化。
inputFiled 代表選取日期後，那一個欄位要存放日期值，必需以 id 指定識別元。
dateFormat 代表選最的日期格式，%Y 是 4 碼年份，%y 則是年份後兩碼等，可以參考官網說明。在格式之間，可以任意加上你想要的區格，例如斜線，%Y/%m/%d 的結果像是 2010/1/1，又如 %Y-%m-%d 則是 2010-1-1。
trigger 是指定觸發日曆啟動的元件，可以是按鈕，也可以是圖形，甚至就是存儲日期的欄位，一樣必需以 id 指定識元。
bottomBar 相當於狀態列，狀態列裡有部份顯示設定。
weekNumbers 設定是否顯示周號，也就是該年第周。
showTime 時間顯示的進制，可以 24 或 12 ，分別代表 24 小時制和 12 小時制。
onSelect 這是 Calendar 物件的事件，可以自己設計內容，例如上例指定為 this.hide() 代表選定日期後把日曆隱藏起來。
min/max 指定可選取的日期區間，格式是 8 碼數字，例如 min:20100118 這代表 2010/1/18 之前的所有日期是無法選取的。同理，也可以指定 max，例如設計輸入生日時，max 應該就是今年。
selectionType 預設為 Calendar.SEL_SINGLE 代表日期是單選，若指定為 Calendar.SEL_MULTIPLE 則代表可以多選。
fdow 指定每周第一天是星期幾，周日=0 依此類推。
cont 指定日曆顯示在指定區塊中。

更多使用說明，請參考官網。更多範例，請按此。

固定式設計

固定式設計指直接畫面上呈現日曆，而不是經由觸發啟動，設計方式略有不同，如下：

<div id="calendar-container"></div> <script type="text/javascript"> var flatCalendar=new Calendar({ fdow :0, cont :"calendar-container", showTime :false, bottomBar :false, weekNumbers :true }); </script>

注意指定 cont 用來存放日曆，其餘設定同觸發式。

Javascript Calendar
官網:http://www.dynarch.com/projects/calendar/
下載:http://www.dynarch.com/projects/calendar/download/
正體中文語系檔:UTF-8 、BIG5
API 說明:http://www.dynarch.com/projects/calendar/doc/
更多範例:請按此。

同意轉載，不過麻煩看一下轉載需知

卜維丰 2011/11/8 下午 04:47:00

林, 有喔, 可加 max 和 min

林 2011/10/28 上午 11:18:00

版主您好

請問這支月曆程式是否有欄位驗證的功能?譬如昨天的日期不能選,只能選今天及之後的日期,如果有此功能該如何設定,敬請解答謝謝!!

mslin 2011/10/28 上午 09:25:00

版主您好

請問這支月曆程式是否有欄位驗證的功能?譬如昨天的日期不能選,只能選今天及之後的日期,如果有此功能該如何設定,敬請解答謝謝!!

popy 2011/7/26 下午 12:26:00

上述網址是txt檔案，請改成html並將js的相對路徑修改即可

我的問題是
1、td及input都是動態新增的，在呼叫時是不是有什麼限制
2、在新增完html的元素後都沒問題，可是在img的click，要呼叫calendar時卻出現了「'q.__.data' 是 null 或不是一個物件」，這會是什麼造成的？
再麻煩大大幫我看一下吧

Rita 2011/7/1 下午 01:57:00

您好參考範例後按下送出button想讓原本選好的日期不被清除的話該怎麼做 ? 本來在TEXT VALUE 設定 != NULL 就 POST 其本來輸入的值 ~ 但卻失效了 .....

林 2011/5/27 下午 06:02:00

很感謝版主的提供
找了好久一直沒找到合適的及引用的方法,剛好看到這一篇,下載來試試看, 感謝!!!

homaster 2011/3/28 下午 11:58:00

謝謝分享...

homaster 2011/3/28 下午 11:56:00

謝謝分享...

elaine 2011/2/11 上午 11:43:00

找到原因了！
將元件放在<form></form>裡時便會有這樣的狀況
但還是不知道怎麼解決？

elaine 2011/2/8 下午 04:00:00

版大您好，
我按照您的教學文做，
但是在IE8可以執行
在chrome和firefox卻都無法執行(按下button沒有反應)，
不知道是什麼原因呢？
感恩！
以下是我的程式碼:


<input name="sDateT" type="text" disabled><input name="sDateBtn" type="button" value="" >
<script type="text/javascript">
new Calendar({
inputField: "sDateT",
dateFormat: "%Y/%m/%d",
trigger: "sDateBtn",
bottomBar: true,
weekNumbers: true,
showTime: 24,
onSelect: function() {this.hide();}
});

Irice 2011/1/17 下午 05:37:00

查了一下，發現是因為1.8抓的時間是國際標準時間，所以會少8小時
解決方法如下，先打開jscal2.js
搜尋'utc'更改這二項
'aG.getUTCHours' ->'aG.getHours'
'aG.getUTCMinutes' ->'aG.getMinutes'

jim2010 2010/12/24 下午 12:02:00

你好，我也遇到與andyto202 、Jaws一樣的問題，就是1.8版的時間顯示與實際時間相差8小時，請問如何調整？謝謝。

vicky 2010/12/16 下午 01:35:00

您好,我也使用了這個日曆....但是發生了一個問題...如果我的日曆有用24小時制時間~它的分鐘是每次加5分鐘,(譬如:59,04,09,14...)...可是,我希望有整點的分鐘(譬如:00,05,10,15...) 但一直找不到修改or設定的地方...不知道您這邊是否知道??><

以下是我的程式:
new Calendar({
inputField: "<%=publicDate.ClientID%>",
dateFormat: "%Y-%m-%d %H:%M",
trigger: "publicDateButton",
bottomBar: true,
weekNumbers: false,
showTime: 24,
onSelect: function () { this.hide(); }
});

謝謝!

jaws 2010/12/9 下午 05:04:00

您好~
請問月曆中的時間如何調到台灣的時區(GMT+8)呢?
感謝您~~

卜維丰 2010/11/23 上午 08:54:00

123, 我估計, 你觸發的 id 重複了
注意看一下上面觸發範例第5,7兩行, 一個指定輸入存放欄位, 一個指定觸發的按鈕或圖片, 都是以 id 區分, 應該是這 id 重複了

123 2010/11/18 下午 01:07:00

放於php中可以,可是在第一欄位中會出現多個日曆
其他欄位的按鈕都會失效
例如1| |(1)
2| |(1)
3| |(1)
點第一個會出現三個日曆

請問有解決的辦法嗎
讓其他按鈕也生效

andyto202 2010/11/1 上午 09:01:00

感謝您
已經成功了
目前官方出到1.8版了
和你的1.7有點差別就是
月曆的下方又多了時間
不過和實際的時間少了八小時
不知道有沒有什麼參數可以加??

卜維丰 2010/10/29 下午 04:24:00

andy, 宣告一個 new Calendar 就是一組日曆, 你要幾個就幾個

andyto202 2010/10/29 上午 11:03:00

請問如果你這個日曆在一個網頁中
要使用多個
要怎麼弄呢
例如我要用一個
起始時間區間(需要兩個日曆)
結速時間區間(需要兩個日曆)
這樣子總共需用四個日曆
照你的方法只能用兩個
>_<

Evey 2010/10/20 下午 02:40:00

版大，謝謝，已成功!

卜維丰 2010/10/20 下午 12:57:00

Evey, 試試 xhtml1-transitional.dtd

Evey 2010/10/20 上午 10:29:00

版大您好!
由於我依照您的作法套用在ASP,日曆顯示沒問題，取值也是可以，但現在遇到一個問題，若是沒有定義<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
日曆的版型會跑掉，若是套用在VB.NET，雖然也有定義上一句，但日曆的版型也會跑掉，我該如何定義，才不會導致這樣的情況?

卜維丰 2010/9/28 下午 04:19:00

jan, 根據你留下的兩句話, 我也很難知道是什麼問題

jan 2010/9/27 下午 09:30:00

請問一下，我照您上面說的輸入後，按下button鈕沒有反應耶，請問一下是那邊出了問題?

Unas 2010/8/12 下午 12:40:00

想請教如果max要直接抓"今日"呢？@@~
是要加上php設定參數才可辦得到嗎？

lun 2010/7/29 下午 05:04:00

阿～有讀取到!是放到資料庫裡面
只出現2010

lun 2010/7/29 下午 05:02:00

不好意思～請問一下
我用選取式的方式產生2010年07月21日,(三)
之後post到下個頁面，卻只有讀到2010
是什麼原因呢？

chunwei 2010/7/21 下午 04:35:00

感謝分享，測試OK，正在使用中!!!

To: 小P

請把
"<script type="text/javascript" src="/JSCal2-1.7/src/js/jscal2.js"></script>"
引入JS的相對路徑"/JSCal2-1.7/src/js/jscal2.js"最前面的"/"去掉，或加上一個"."

小P 2010/6/30 上午 11:44:00

版大你好
我用你上述的方式做
怎麼都會出現"Calendar 未被定義"的錯誤訊息呢?

這要從那裏著手呢?

卜維丰 2010/6/20 下午 06:24:00

小 P, 純 client 的東西, 不分 PHP 或其他

小P 2010/6/19 下午 04:40:00

版大你好
我用你上述的方式做
怎麼都會出現"Calendar 未被定義"的錯誤訊息呢?

這要從那裏著手呢?

小P 2010/6/19 下午 02:04:00

版大請問一下,這支月曆程式可以在PHP底下跑嗎?

lulu 2010/3/13 下午 10:36:00

謝謝分享...

給個回應

姓名:
佈落格網址:
	如果您是要發問問題, 最好有個問題測試的網址, 這樣比較容易找到您問題所在, 謝謝
內容:

以下為本站文章分類清單

以下為本站側欄內容

以下為最近發表的文章

以下為本頁本文內容

JavaScript 日曆

步驟一：連結必要檔案

觸發式設計

固定式設計

以下為文章回應區