9月30日 好用的日期選擇器

再用 vb.net 或者是 java 都有幫你準備一個 date dialog

但是 在寫網頁時候沒有這種元件給你使用，現在推薦一個很好用的日期選擇器　JSCal2

http://www.dynarch.com/projects/calendar/

下載網是：　http://www.dynarch.com/projects/calendar/download/1.7/JSCal2-1.7.zip

這邊就小小的示範一下如何使用

先載入　.js 和 .css 檔

<script src="DateJsAndCSSsrc/js/jscal2.js">script>

<script src="DateJsAndCSSsrc/js/lang/en.js">script>

<link rel="stylesheet" type="text/css" href="DateJsAndCSSsrc/css/jscal2.css" />

<link rel="stylesheet" type="text/css" href="DateJsAndCSSsrc/css/border-radius.css" />

<link rel="stylesheet" type="text/css" href="DateJsAndCSSsrc/css/steel/steel.css" />

再來設定 觸發的按鈕，和得到資訊的textbox，在 body 加入

<input size="30" id="f_date1" /><button id="f_btn1">...button><br />

<input size="30" id="f_date2" /><button id="f_btn2">...button><br />

<input size="30" id="f_date3" /><button id="f_btn3">...button><br />

<input size="30" id="f_date4" /><button id="f_btn4">...button>

再來寫觸發事件

<script type="text/javascript">//

var cal = Calendar.setup({

onSelect: function(cal) { cal.hide() }

});

//4種不同格式的範例 ，參視為　　cal.manageFields(［觸發的按鈕ID］, "［接收答案的物件ID］", [日期格式]);

cal.manageFields("f_btn1", "f_date1", "%Y-%m-%d");

cal.manageFields("f_btn2", "f_date2", "%b %e, %Y");

cal.manageFields("f_btn3", "f_date3", "%e %B %Y");

cal.manageFields("f_btn4", "f_date4", "%A, %e %B, %Y");

//]]>script>