1. 程式人生 > >My97DatePicker日期範圍限制

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