日期控件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两个日期框，结束日期大于开始日期

<inputid=”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复制到函数里。