【Web】WDatePicker 插件常用的幾種日期格式管理

WDatePicker 插件常用的幾種日期格式管理

效果

代碼

<script src="./jquery-3.4.1.js"></script>
<script src="./WdatePicker.js"></script>
<link href="./skin/WdatePicker.css">

<!-- 
        %y  當前年 
    　　%M  當前月 
    　　%d  當前日 
    　　%ld 本月最後一天 
    　　%H  當前時 
    　　%m  當前分 
    　　%s  當前秒 
-->

<label for="">測試欄位：最小值爲參照欄位的前兩天，最大值爲當天</label>
<!-- #F{} 中可寫自定義函數 -->
<!-- $dp.$D(id, {d:-2}) 其中兩個參數：第一個參數爲參照欄位的 id， 第二個參數爲偏移值 -->
<input type="text" name="TESTTIME" id="testTime"
    onclick="WdatePicker({  minDate: '#F{$dp.$D(\'endTime\', {d:-2});}',maxDate:'%y/%M/%d', dateFmt: 'yyyy/MM/dd' })"
    class="text_a" value="2019/08/08" />
<br>

<label for="">測試欄位：最大值爲參考欄位的值，如參考欄位爲空，最大值爲當天前三天</label>
<!-- $dp.$DV(time, {d:-3}) 其中兩個參數：第一個參數爲字符串日期，第二個參數爲偏移值 -->
<!-- 備註：使用$dp.$D(\'%y/%M/#{%d-2}\') 方式也可以獲取當前日期，但是加入偏移值 -2 之後沒有效果，可能使用方式不對，使用 $dp.$DV 之後正常 -->
<input type="text" name="STARTTIME" id="startTime"
    onclick="WdatePicker({ maxDate:'#F{$dp.$D(\'endTime\') || $dp.$DV(\'%y/%M/%d\', {d:-3})}', dateFmt: 'yyyy/MM/dd' })"
    class="text_a" value="" />
<br>

<label for="">參考欄位：最大值爲當天前三天</label>
<input type="text" name="ENDTIME" id="endTime" onclick="WdatePicker({  maxDate: '%y/%M/#{%d-3}', dateFmt: 'yyyy/MM/dd' })"
    class="text_a" value="" />

<br>
<label for="">測試欄位：不允許選擇所有的週三</label>
<!-- 禁用指定星期 disabledDays：0-6表示週日-週六 -->
<input type="text" name="DISABLED" id="DISABLED" onclick="WdatePicker({ disabledDays:[3], dateFmt: 'yyyy/MM/dd' })"
    class="text_a" value="" />

<br>
<label for="">測試欄位：不允許選擇所有的 8日、18日、28日</label>
<!-- 禁用指定日期 disabledDates 規則可以寫正則表達式與動態表達式組合 如 ['%y-%M-{%d-1}','%y-%M-{%d+1}']  ['201[8-9]]-08-08'] 等 -->
<!-- 禁用所有的 8日 18 日 28 日 -->
<input type="text" name="" id="S" onclick="WdatePicker({ disabledDates:['8$'], dateFmt: 'yyyy/MM/dd' })"
    class="text_a" value="" />