Fork me on GitHub

My97DatePicker日期范围限制

1.动态时间范围限制：

    可以通过系统给出的动态变量，如%y(当前年)，%M(当前月)等来限制日期范围，还可以通过{}进行表达式运算，如:{%d+1}：表示明天。

格式 说明
%y  当前年
%M  当前月
%d  当前日
%ld 本月最后一天
%H  当前时
%m 当前分
%s  当前秒
{} 运算表达式, 如:{%d+1}: 表示明天
#F{} {}之间是函数可写自定义JS代码

    1）只能选择今天以前的日期(包含今天）。

<input type="text" class="Wdate" id="occurDate" onfocus="WdatePicker({skin:'whyGreen',dateFmt: 'yyyy-MM-dd', maxDate:'%y-%M-%d', readOnly:true})" value = "${occurdate}" style="background-color:#e4e4e4;; height:65%; width:100%"></input>

       2) 只能选择今天以后的日期(不包含今天),使用运算表达式。

<input type="text" class="Wdate" id="occurDate" onfocus="WdatePicker({skin:'whyGreen',dateFmt: 'yyyy-MM-dd', minDate:'%y-%M-{%d+1}', readOnly:true})" value = "${occurdate}" style="background-color:#e4e4e4;; height:65%; width:100%"></input>

       3) 只能选择本月日期1号到本月最后一天的日期。

<input type="text" class="Wdate" id="occurDate" onfocus="WdatePicker({skin:'whyGreen',dateFmt: 'yyyy-MM-dd', minDate:'%y-%M-01',maxDate:'%y-%M-%ld', readOnly:true})" value = "${occurdate}" style="background-color:#e4e4e4;; height:65%; width:100%"></input>

      4) 只能选择今天8:00:00至明天12:00:00的日期。

<input id="occurDate" class="Wdate" type="text" onfocus="WdatePicker({dateFmt:'yyyy-M-d H:mm:ss',minDate:'%y-%M-%d 8:00:00',maxDate:'%y-%M-{%d+1} 12:00:00'})"/>

      5) 只能选择10小时前至50小时后的日期。

<input id="occurDate" class="Wdate" type="text" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',minDate:'%y-%M-%d {%H-10}:%m:%s',maxDate:'%y-%M-%d {%H+50}:%m:%s'})"/>

2.脚本自定义限制：

       系统提供了$dp.$D和$dp.$DV这两个API来辅助进行日期运算，此外还可以通过在 #F{} 中填入自定义的脚本，做任何你想做的日期限制 。

     1) 前面的日期不能大于后面的日期且两个日期都不能大于当前年的最后一天。

<input id="date1" class="Wdate" type="text" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'date2\')||\''%y-12-31\'}'})"/> 
<input id="date2" class="Wdate" type="text" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'date1\')}',maxDate:'%y-12-31'})"/>

       2) 前面的日期+5天，不能大于后面的日期。

<input id="date1" type="text" class="Wdate" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'date2\',{d:-5});}'})"/> 
<input id="date2" type="text" class="Wdate" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'date1\',{d:5});}'})"/>

       3) 前面的日期+2月零6天，不能大于后面的日期且前面日期都不能大于 2020-6-6减去2月零6天，后面日期不能大于2020-6-6。

<input id="date1" type="text" class="Wdate" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'date2\',{M:-2,d:-6})||$dp.$DV(\'2020-6-6\',{M:-2,d:-6})}'})"/> 
<input  id="d4332" type="text" class="Wdate" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'date1\',{M:2,d:6});}',maxDate:'2020-6-6'})"/>

3.无效天限制:

      1) 可以使用此功能禁用周日至周六所对应的日期，相关属性：disabledDays (0至6 分别代表周日至周六) 。

<input id="date1" type="text" class="Wdate" onFocus="WdatePicker({disabledDays:[6]})"/>

       2) 禁用周六，周日所对应的日期。

<input id="date2" type="text" class="Wdate" onFocus="WdatePicker({disabledDays:[0,6]})"/>

4.无效日期限制：

   1）可以使用此功能禁用所指定的一个或多个日期，只要熟悉正则表达式。

      用法(正则匹配):  如果你熟悉正则表达式，会很容易理解下面的匹配用法；如果不熟悉，可以参考下面的常用示例 ：

      ['2010-01-01','2010-02-02'] 表示禁用 2010-01-01 和 2010-02-02。
      ['2010-..-01','2010-02-02'] 表示禁用 2010-所有月份-01 和 2010-02-02。
      ['200[0-9]]-02-01','2010-02-10'] 表示禁用 [2000至2009]-02-01 和 2010-02-10。
      ['^2010'] 表示禁用 2010年的所有日期。

      此外，还可以使用 %y %M %d %H %m %s 等变量，用法同动态日期限制。注意：%ld不能使用。
      ['....-..-01','%y-%M-%d'] 表示禁用所有年份和所有月份的第一天和今天。
      ['%y-%M-{%d-1}','%y-%M-{%d+1}'] 表示禁用昨天和明天。

      当然,除了可以限制日期以外，还可以限制时间：
      ['....-..-.. 11\:00\:00'] 表示禁用每天11点 (注意 : 需要使用 \: ) 。

    2) 禁用每个月份的5日15日25日。

<input id="date1" type="text" class="Wdate" onFocus="WdatePicker({disabledDates:['5$']})"/>

     注意 :'5$' 表示以5结尾，注意 $ 的用法。

   3）禁用所有早于2000-01-01的日期。

<input id="date1" type="text" class="Wdate" onFocus="WdatePicker({disabledDates:['^19']})"/>

     注意: '^19' 表示以19 开头，注意 ^ 的用法 。

   4）配合min/maxDate使用，可以把可选择的日期分隔成多段。

<input id="date3" type="text" class="Wdate" onFocus="WdatePicker({minDate:'%y-%M-01',maxDate:'%y-%M-%ld',disabledDates:['0[4-7]$','1[1-5]$','2[58]$']})"/>

    5) min/maxDate disabledDays disabledDates 配合使用，即使在要求非常苛刻的情况下也能满足需求。

<input id="date4" type="text" class="Wdate" onFocus="WdatePicker({minDate:'%y-%M-01',maxDate:'%y-%M-%ld',disabledDates:['0[4-7]$','1[1-5]$','2[58]$'],disabledDays:[1,3,6]})"/>

    6) 禁用前一个小时和后一个小时内所有时间，使用 %y %M %d %H %m %s 等变量。

<input id="date5" type="text" class="Wdate" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',disabledDates:['%y-%M-%d {%H-1}\:..\:..','%y-%M-%d {%H+1}\:..\:..']})"/>

    7) #F{}也是可以使用的，利用自定义函数随机禁用0-23中的任何一个小时，打开小时选择框，发现有一个小时被禁用，而且每次禁用的小时都不同。

<script> 
   function randomH(){ 
  //产生一个随机的数字 0-23 
  var H = Math.round(Math.random() * 23); 
  if(H<10) H='0'+H; 
      //返回 '^' + 数字 
      return '^'+H; 
    } 
</script> 

<input type="text" class="Wdate" id="date5" onFocus="WdatePicker({dateFmt:'HH:mm:ss',disabledDates:['#F{randomH()}']})"/>

5.有效日期:

  使用无效日期可以很方便的禁用不可用的日期，但是在只需要启用少部分日期的情况下，有效日期的功能就非常适合了。

   关键属性: opposite 默认为false， 为true时，无效日期变成有效日期，该属性对无效天，特殊天不起作用 。

    1) 只启用每个月份的 5日 15日 25日。

<input id="date1" type="text" class="Wdate" onFocus="WdatePicker({opposite:true,disabledDates:['5$']})"/>

6.特殊天和特殊日期:

     特殊天和特殊日期的用法跟完全无效天和无效日期完全相同，但是opposite属性对其无效。

    关键属性:

       specialDays (0至6 分别代表 周日至周六) 用法同无效天。

       specialDates 用法同无效日期，但是对时分秒无效。

      1) 高亮每周 周一 周五。

<input id="date1" type="text" class="Wdate" onFocus="WdatePicker({specialDays:[1,5]})"/>

      2) 高亮每月 1号 15号。

<input id="date2" type="text" class="Wdate" 
onFocus="WdatePicker({specialDates:['....-..-01','....-..-15']})"/>
posted @ 2016-03-09 10:22  火雨(Nick)  阅读(10652)  评论(2)  编辑  收藏  举报