日期控件My97DatePicker詳解


My97相信大家都不陌生,應該是我所見過的最強大的一個日歷控件了,最近的項目中也比較多地用到了此控件,而且項目中經常會有不同時間范圍的需求,在此列出一些比較常用的日期范圍格式的設置,盡管在My97的官方文檔中有很詳細的介紹,正是因為很詳細所以查找起來不是很方便。

1 可以選擇任何日期

<input id="txtDate" class="Wdate" type="text" onfocus="WdatePicker()" />

2 今天以前的日期

<input type="text" class="Wdate" onfocus="WdatePicker({maxDate:'%y-%M-#{%d}'})" />

3 今天以后的日期

<input type="text" class="Wdate" onfocus="WdatePicker({minDate:'%y-%M-#{%d}'})" />

上面設置今天以前和今天以后的日期用到的是maxDate和minDate,%y-%M-#{%d} 表示的是當天的日期,如果想今天以前或是今天以后的日期不包括今天,設置表達式中的d減去1或是加上1即可,如下:

<!--今天以前的日期不包括今天-->
    <input type="text" class="Wdate"     onfocus="WdatePicker({maxDate:'%y-%M-#{%d-1}'})" />
    <!--今天以后的日期不包括今天-->
    <input type="text" class="Wdate"     onfocus="WdatePicker({minDate:'%y-%M-#{%d+1}'})" />

4 同樣如果只能選擇今天設置maxDate和minDate都為今天就行,不過這個不常用到

<input type="text" class="Wdate" onfocus="WdatePicker({maxDate:'%y-%M-#{%d}',minDate:'%y-%M-#{%d}'})" />

5 兩個日期框,結束日期大於開始日期

<input id="txtStartDate" type="text" class="Wdate" onclick="WdatePicker({maxDate:'#F{$dp.$D(/'txtEndDate/',{d:-1})}'})" />
    <input id="txtEndDate" type="text" class="Wdate" onclick="WdatePicker({minDate:'#F{$dp.$D(/'txtStartDate/',{d:1})}'})" />

如果將結束日期框的onclick里的{d:1} 改成{d:0},就表示結束日期可以選擇和開始日期同一天

6 今天以前或以后N天的日期

<input type="text" class="Wdate" onfocus="WdatePicker({maxDate:'%y-%M-#{%d}',    minDate:'%y-%M-#{%d-7}'})" />
    <!--選擇今天以后7天的日期-->
    <input type="text" class="Wdate" onfocus="WdatePicker({minDate:'%y-%M-#{%d}',    maxDate:'%y-%M-#{%d+7}'})" />

7 兩個日期框,結束日期大於開始日期,並且都是今天以后的日期

<input id="txtB" type="text"  class="Wdate" onclick="WdatePicker({minDate:'%y-%M-#{%d}',    maxDate:'#F{$dp.$D(/'txtE/',{d:-1})}'})"/>
    <input id="txtE" type="text"  class="Wdate" onFocus="WdatePicker({minDate:'#F{$dp.$D(/'txtB/',{d:1})||    /'%y-%M-#{%d+2}/'}'})"/>

8 兩個日期框,第一個選擇后觸發第二個彈出

<input id="txtBegin" class="Wdate" type="text" onfocus="var d5222=$dp.$('txtEnd');
    WdatePicker({onpicked:function(){txtEnd.focus();},maxDate:'#F{$dp.$D(/'txtEnd/')}'})" />
    <input id="txtEnd" class="Wdate" type="text" onfocus="WdatePicker({minDate:'#F{$dp.$D(/'txtBegin/')}'})" />

常用的日期范圍選擇先就總結這么多,還有些的功能比如給文本框加個日歷小圖標、禁止文本框輸入、禁止日歷控件清空等也是很常用的,代碼如下:

<!--給文本加上class=Wdate 文本框的右邊就有日歷小圖標-->
    <input class="Wdate" type="text" onfocus="WdatePicker()" />
    <!--禁止文本框輸入-->
    <input class="Wdate" type="text" onfocus="WdatePicker({readOnly:true})" />
    <!--禁止文本框輸入-->
    <input class="Wdate" type="text" onfocus="WdatePicker({isShowClear:false})" />
    <!--當然幾種功能也能放到一起-->
    <input class="Wdate" type="text" onfocus="WdatePicker({readOnly:true,isShowClear:false})" />

這里只是列出了些常用的功能,要想了解更多還是去看官方文檔吧。至於日期范圍的選擇,看懂了那些代碼就可以很容易地根據需求進行更改了。

注:上面又涉及到開始日期和結束日期兩個日期框的,文本框控件必須要有id,這個id函數里面會用到,如果您的開發中使用了Aspnet中的MasterPage,那么文本框的id在生成頁面后會改變,類似於:ctl00_ContentPlaceHolder1_txtEndDate,如果還是用文本框本身的id是不會起作用的,我的做法是查看源文件將生成的id復制到函數里。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM