最近在找可以放在表單裡,可以方便使用者輸入日期的方法,在網路上找到了這個好用簡單的控制項 – JSCal2
是由Javascript寫成的,整體的操作上非常的流暢還有支援滑鼠滾輪,算是蠻全面的一個月曆元件。
目前我使用的版本為JSCal2-1.7

JSCal2官網,JSCal2-1.7下載

下載後將檔案解壓縮,再下載中文化檔(網路上我找不到,所以自己修改了一個),將中文化檔放在』/JSCal2/js/lang/』底下,之後將以下網頁代碼加入在網頁<head></head>標籤中

    <link rel="stylesheet" type="text/css" href="/JSCal2/css/jscal2.css" />
    <link rel="stylesheet" type="text/css" href="/JSCal2/css/border-radius.css" />
    <link rel="stylesheet" type="text/css" href="/JSCal2/css/gold/gold.css" />
    <script type="text/javascript" src="/JSCal2/js/jscal2.js"></script>
    <script type="text/javascript" src="/JSCal2/js/lang/en.js"></script>
    <script type="text/javascript" src="/JSCal2/js/lang/calendar-big5-utf8.js"></script>

另外在中加入下面javascript程式碼

?View Code JAVASCRIPT
<script type="text/javascript">
Calendar.setup({
    cont          : "calendar-container",
    weekNumbers   : true,
    selectionType : Calendar.SEL_MULTIPLE,
    selection     : Calendar.dateToInt(new Date()),
    showTime      : 12
});
Calendar.setLanguage("tw");//更換中文,如果不需要此行刪除
</script>

接下來在加入下面代碼

<input id="dateText"  />
<input type="button" id="f_trigger" value="選擇日期" />
<script type="text/javascript">
    new Calendar({
         inputField: "dateText",
         trigger: "f_trigger",
	 dateFormat: "%B %d, %Y",
         bottomBar: false,
         onSelect: function() {
            this.hide();
         }
     });
</script>

改好後存檔就可以使用啦,這只是簡單的運用,還有許多的變化作者的網站上有介紹,例如有不同的樣式可以更換或者可以直接放在網頁中等等..