My97相信大家都不陌生，應該是我所見過的最強大的一個日曆控件了，最近的項目中也比較多地用到了此控件，而且項目中經常會有不同時間範圍的需求，在此列出一些比較常用的日期範圍格式的設置，儘管在My97的官方文檔中有很詳細的介紹，正是因爲很詳細所以查找起來不是很方便。
1 可以選擇任何日期
<input id="txtDate" class="Wdate" type="text" οnfοcus="WdatePicker()" />
2 今天以前的日期
<input type="text" class="Wdate" οnfοcus="WdatePicker({maxDate:'%y-%M-#{%d}'})" />
3 今天以後的日期
<input type="text" class="Wdate" οnfοcus="WdatePicker({minDate:'%y-%M-#{%d}'})" />
上面設置今天以前和今天以後的日期用到的是maxDate和minDate，%y-%M-#{%d} 表示的是當天的日期，如果想今天以前或是今天以後的日期不包括今天，設置表達式中的d減去1或是加上1即可，如下：
<!--今天以前的日期不包括今天-->
<input type="text" class="Wdate" οnfοcus="WdatePicker({maxDate:'%y-%M-#{%d-1}'})" />
<!--今天以後的日期不包括今天-->
<input type="text" class="Wdate" οnfοcus="WdatePicker({minDate:'%y-%M-#{%d+1}'})" />
4 同樣如果只能選擇今天設置maxDate和minDate都爲今天就行，不過這個不常用到
<input type="text" class="Wdate" οnfοcus="WdatePicker({maxDate:'%y-%M-#{%d}',minDate:'%y-%M-#{%d}'})" />
5 兩個日期框，結束日期大於開始日期
<input id="txtStartDate" type="text" class="Wdate" οnclick="WdatePicker({maxDate:'#F{$dp.$D(/'txtEndDate/',{d:-1})}'})" />
<input id="txtEndDate" type="text" class="Wdate" οnclick="WdatePicker({minDate:'#F{$dp.$D(/'txtStartDate/',{d:1})}'})" />
如果將結束日期框的onclick裏的{d:1} 改成{d:0}，就表示結束日期可以選擇和開始日期同一天
6 今天以前或以後N天的日期
<input type="text" class="Wdate" οnfοcus="WdatePicker({maxDate:'%y-%M-#{%d}', minDate:'%y-%M-#{%d-7}'})" />
<!--選擇今天以後7天的日期-->
<input type="text" class="Wdate" οnfοcus="WdatePicker({minDate:'%y-%M-#{%d}', maxDate:'%y-%M-#{%d+7}'})" />
7 兩個日期框，結束日期大於開始日期，並且都是今天以後的日期
<input id="txtB" type="text" class="Wdate" οnclick="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" οnfοcus="var d5222=$dp.$('txtEnd');
WdatePicker({onpicked:function(){txtEnd.focus();},maxDate:'#F{$dp.$D(/'txtEnd/')}'})" />
<input id="txtEnd" class="Wdate" type="text" οnfοcus="WdatePicker({minDate:'#F{$dp.$D(/'txtBegin/')}'})" />
常用的日期範圍選擇先就總結這麼多，還有些的功能比如給文本框加個日曆小圖標、禁止文本框輸入、禁止日曆控件清空等也是很常用的，代碼如下：
<!--給文本加上class=Wdate 文本框的右邊就有日曆小圖標-->
<input class="Wdate" type="text" οnfοcus="WdatePicker()" />
<!--禁止文本框輸入-->
<input class="Wdate" type="text" οnfοcus="WdatePicker({readOnly:true})" />
<!--禁止文本框輸入-->
<input class="Wdate" type="text" οnfοcus="WdatePicker({isShowClear:false})" />
<!--當然幾種功能也能放到一起-->
<input class="Wdate" type="text" οnfοcus="WdatePicker({readOnly:true,isShowClear:false})" />
這裏只是列出了些常用的功能，要想了解更多還是去看官方文檔吧。至於日期範圍的選擇，看懂了那些代碼就可以很容易地根據需求進行更改了。
附上一個小實例
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <title>jQuery學習 第一部分</title>
- <script type="text/javascript" src="js/date/WdatePicker.js"></script>
- <style type="text/css">
- html,body{
- font-size: 13px;
- font: normal;
- }
- table{
- font-size: 13px;
- }
- </style>
- </head>
- <body>
- 好用的日期插件My97DatePicker，下面是日期選擇範圍的示例，包括設定日期選擇的起始日期、日期的格式化以及日期的最大值<br/>
- <table>
- <tbody>
- <tr>
- <th>開始日期</th>
- <td>
- <input type="text" id="beginDate" readonly="readonly" name="endDate" class="Wdate"
- onclick="WdatePicker({startDate:'%y-%M-%d',dateFmt:'yyyy-MM-dd',maxDate:'#F{$dp.$D(\'endDate\')}'} )"/>
- </td>
- </tr>
- <tr>
- <th>結束日期</th>
- <td>
- <input type="text" id="endDate" readonly="readonly" name="endDate" class="Wdate"
- onclick="WdatePicker({startDate:'%y-%M-%d',dateFmt:'yyyy-MM-dd',minDate:'#F{$dp.$D(\'beginDate\')}'})"/>
- </td>
- </tr>
- </tbody>
- </table>
- </body>
- </html>