日期控件

國産的my97日期控件 http://www.my97.net/dp/index.asp 

使用引入js即可

<script language="javascript" type="text/javascript" src="datepicker/wdatepicker.js"></script>  

選擇第一個日期的時候,第二個日期選擇框自動彈出

日期從: 至 

注意: 下面第一個控件代碼的寫法

<input type="text" class="wdate" id="d4321" onfocus="wdatepicker({maxdate:'#f{$dp.$d(\'d4322\',{d:-1});}'})"/>  

<input type="text" class="wdate" id="d4322" onfocus="wdatepicker({mindate:'#f{$dp.$d(\'d4321\',{d:1});}'})"/>  

使用 $dp.$d 函數 可以将日期框中的值,加上定義的日期差量:

兩個參數: id={字元類型}需要處理的文本框的id值 , obj={對象類型}日期差量 

日期差量用法: 

屬性y,m,d,h,m,s分别代表年月日時分秒

如 

為空時,表示直接取值,不做差量(示例4-3-1中的參數就是空的)

{m:5,d:7} 表示 五個月零7天

{y:1,d:-3} 表示 1年少3天

{d:1,h:1} 表示一天多1小時

<input type="text" id="readable_date" class="wdate" value="2013-01-15" onfocus="wdatepicker({onpicking:changefun})"/>  

function changefun(dp){  

    if(dp.cal.getdatestr() !=dp.cal.getnewdatestr()){  

        initquota();  

    }  

}  

該月曆控件亂碼解決必須加入charset="utf8"來轉碼，才能功能解決亂碼 如：

<script src="src/js/lang/jp.js" charset="utf8"></script>  

<script src="src/js/lang/cn.js" charset="utf8"></script>  

在項目中使用的時候，需要用到年/月/日/小時/分鐘,，但是一直沒有辦法正确初始化，比如目前時間是14：30， 但是月曆是按世界時間顯示，也就是說顯示成了6：30 。 (要正确設定電腦的時區如：gmt+8：00 beijing)

解決方法是增加onchange事件，如下：

<input id="calendar-inputfield" /><button id="calendar-trigger">...</button>  

<script>  

calendar.setup({  

    trigger    : "calendar-trigger",  

    inputfield : "calendar-inputfield",  

    dateformat: "%y-%m-%d",    

    ontimechange : updatefields , //外定義方法  

    onchange : function(){  

         this.sethours(new date().gethours());  

         this.setminutes(new date().getminutes());  

    onselect: function() { this.hide() },  

    showtime: false  

});  

function updatefields (cal) {  

    var date = cal.selection.get();  

    if (date) {  

        date = calendar.inttodate(date);  

        document.getelementbyid("f_date").value = calendar.printdate(date, "%y-%m-%d"+" "+cal.gethours()+"-"+cal.getminutes());  

    document.getelementbyid("f_hour").value = cal.gethours();  

    document.getelementbyid("f_minute").value = cal.getminutes();  

};  

</script>  

除此之外，把chargetime的輸入框初始化為目前事件。

<td>  

<input style="text-align: center" readonly="true" value="2010-10-05" name="date" id="f_date"/>  

</td>  

<input style="text-align: center" readonly="true" name="hour" id="f_hour" size="2" />  

<td>:</td>  

<input style="text-align: center" readonly="true" name="minute" id="f_minute" size="2" />  

<link rel="stylesheet" href="calendar/css/jscal2.css" />  

<link rel="stylesheet" href="calendar/css/border-radius.css" />  

<!--上面兩個css檔案是必須引入的-->  

<link rel="stylesheet" href="calendar/css/reduce-spacing.css" />  

<!--reduce-spacing.css不是必須的，引入該檔案能使月曆以一種緊湊的方式顯示，實際效果就是月曆變小了。-->  

<link title="gold" type="text/css" rel="stylesheet" href="calendar/css/gold/gold.css" />  

<!--這個是月曆的皮膚檔案，這一款本人覺得比較cool，下載下傳下來預設還有其他幾款皮膚，可以在calendar/css檔案夾下找到，引入相應css後就能應用。-->  

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

<script src="src/js/lang/en.js" charset="utf8"></script>  

<!--en.js是語言檔案，該月曆支援語言繁多，當然是支援中文的。如果引入全部語言檔案，月曆還能根據作業系統的語言自動選擇語言檔案，蠻智能的。-->  

<form method="post" action="">  

<input type="text" name="date" id="date" />  

<!--下面這段腳本初始化一個月曆對象，沒有這段腳本月曆将無法運作。-->  

<script type="text/javascript">  

new calendar({  

    inputfield: "date", //date對應輸入日期的地方，這裡隻id為date的input輸入框  

    trigger: "date",//trigger指點選後彈出月曆的對象，這裡定位id是date的input框  

    dateformat: "%y-%m-%d %h:%m:%s",//定義日期顯示格式。  

    weeknumbers: true,//設為true則在月曆左側顯示星期數  

    reversewheel:true,  

    onselect: function() { this.hide() }//這段代碼是為了讓使用者在月曆上選擇日期後月曆能自動隐藏  

</form>   

這個例子使用了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 模式下可以設定預設選中一個時間段。

w eeknumbers —預設false。設定為true就會在左側多出一欄顯示周數。

c heckrange — 預設為false。當你開啟了範圍選擇，但又不希望使用者可以選擇已被禁止的日期，那麼開啟此選項。

a lign — 預設的位置選項，僅針對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 — 月曆失去焦點後的回調函數。