首頁    文章清單    【老卜】    【卡羅素‧渥客】

 

中文版(簡體)說明

以下為最近發表的文章

JavaScript 日曆

1/18 10'

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

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

選取式的操作則像：

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

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

步驟一：連結必要檔案

<script type="text/javascript" src="/JSCal2-1.7/src/js/jscal2.js"></script> <script type="text/javascript" src="/JSCal2-1.7/src/js/lang/b5.js"></script> <link type="text/css" rel="stylesheet" href="/JSCal2-1.7/src/css/jscal2.css" />

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

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

<script type="text/javascript" src="/JSCal2-1.7/src/js/jscal2.js"></script> <script type="text/javascript" src="/JSCal2-1.7/src/js/lang/b5.js"></script> <link type="text/css" rel="stylesheet" href="/JSCal2-1.7/src/css/jscal2.css" /> <link type="text/css" rel="stylesheet" href="/JSCal2-1.7/src/css/border-radius.css" /> <link id="skin-gold" title="Gold" type="text/css" rel="stylesheet" href="/JSCal2-1.7/src/css/gold/gold.css" />

觸發式設計

<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/
更 多範例:請按此。

 

 

以下為文章回應區

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

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

謝謝分享...

給個回應

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