jsp时间插件

xiaoxiao2021-02-28  85

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})" />

转载请注明原文地址: https://www.6miu.com/read-57328.html

最新回复(0)