【卜維丰】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/
更多範例:請按此。