最近在找可以放在表單裡,可以方便使用者輸入日期的方法,在網路上找到了這個好用簡單的控制項 – JSCal2
是由Javascript寫成的,整體的操作上非常的流暢還有支援滑鼠滾輪,算是蠻全面的一個月曆元件。
目前我使用的版本為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程式碼<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> |
改好後存檔就可以使用啦,這只是簡單的運用,還有許多的變化作者的網站上有介紹,例如有不同的樣式可以更換或者可以直接放在網頁中等等..