JSCal2-The new coolest JavaScript calendar 簡單應用

本文轉自：http://willpress.com/solagirl/archives/126

JSCal2是一款簡單實用而且非常酷的日曆控件，功能豐富界面華麗，在官網http://www.dynarch.com/projects/calendar/有非常詳細的介紹。這裏是一個簡單的應用實例。

下面是實例源代碼。

這個例子使用了popup模式，與官方給出的例子稍有區別，官方的例子通常都在input旁邊有一個按鈕，也就是trigger，點這個按鈕就能彈出一個日曆，但經過試驗這種方式在表單中並不好使，如果將帶着額外trigger的input放到<form></form>中，日曆就會失效。因此將input field和trigger合二爲一，實際效果是點擊input輸入框就會彈出日曆，這樣就不用擔心用戶手動向input中輸入非法數據的問題了。

爲了更好的使用該日曆，下面附上日曆的屬性列表。

animation — 默認爲true(IE6除外)，如果傳遞true給該屬性，就會強制所有瀏覽器（包括IE6）應用動畫，傳遞false則所有瀏覽器都禁用動畫。
cont —內聯顯示的日曆的容器（對popup類型無效），將要顯示日曆的容器（如div等）的ID傳遞給此屬性，則日曆將在相應容器中以內斂方式顯示（即日曆在刷新頁面後直接顯示，popup類型則必須點擊trigger後才顯示日曆）。
bottomBar — 布爾類型，默認值true。在底部顯示一個帶有“Today”按鈕的工具條。
date — 日曆默認顯示的日期。
fdow — 一週的第一天，默認日期定義在各個語言文件中。例如傳遞0給屬性指一週的從週日開始，傳遞1則是從週一開始，以此類推。
min — 日曆可以選擇的最早的日期.
max — 與min配合使用，表示日曆可以選擇的最大日期。
reverseWheel — 默認爲false。如果想反轉鼠標滾輪滾動時日曆的變化方向，設置此項爲true。（JsCAL可以滾動滾輪控制日曆翻頁。）
selectionType – 默認SEL_SINGLE，只能選擇一個日期。設爲SEL_MULTIPLE的話就能選擇多個日期。
selection —設置日曆初始化時默認選中的日期。在SEL_SINGLE模式下可以設置默認選中當前日期，在SEL_MULTIPLE 模式下可以設置默認選中一個時間段。
weekNumbers —默認false。設置爲true就會在左側多出一欄顯示週數。
checkRange — 默認爲false。當你開啓了範圍選擇，但又不希望用戶可以選擇已被禁止的日期，那麼開啓此選項。
align — 默認的位置選項，僅針對popup類型。
inputField — 這是一個與input關聯的ID，僅針對popup類型，日期將會顯示在與這個ID關聯的input輸入框中。
trigger — 按鈕元素（或其他任何元素）的ID，點擊這個元素可以顯示日曆，僅針對popup類型這是onclick時間的鉤子函數。
dateFormat — 日期格式化，以字符串形式格式化日期和時間的顯示形式。
opacity — 透明度設置。0爲不透明，1、2、3則會增加透明度。IE瀏覽器默認是1，其他瀏覽器默認是3。透明度過高會顯著降低程序再IE瀏覽器中的執行速度。
titleFormat — 定義日曆中日期的顯示形式。默認是“b% %Y”，顯示形式如“April 2010”。
showTime — 默認爲false。顯示時間選擇器，設置爲true會顯示24小時的時間選擇器，設置爲12則顯示帶有am/pm的12小時時間選擇器。
timePos — 時間選擇器在底部欄目中的位置，默認是“right”，即在“Today” 按鈕的右側，設置爲“left”就會出現在“Today”的左側。
time — 日曆時間選擇器中顯示的默認時間。默認顯示當前時間，如果要改變默認時間，可以傳遞一個格式爲“HHMM”d的整數，比如要顯示9:45 pm,則傳遞2145in。
minuteStep — 分鐘增長和減少的步長。
onSelect — 選擇日期後要調用的函數。
onChange —日期時間發生變化後的回調函數。
onTimeChange — 當時間選擇器的時間發生變化後的回調函數，它將獲得兩個參數：日曆的實例引用和時間選擇器中的時間。
disabled —處理被禁用的日期的回調函數。
dateInfo — 獲取某一個日期的額外信息的回調函數，比如給日期添加一個CSS 類名，或者當鼠標滑過日期時顯示一段提示。
onFocus — 日曆獲得焦點後的回調函數。
onBlur — 日曆失去焦點後的回調函數。