WdatePicker之使用

原创已于 2023-03-04 16:33:48 修改 · 949 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript

于 2018-12-25 15:52:26 首次发布

JavaScript 专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍WdatePicker插件的使用方法，包括基本用法和高级功能，如限制日期和时间范围、动态变量表及函数应用等，适用于前端开发人员快速掌握日期选择器的定制配置。

一.动态变量表

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

二.简单应用案例

(0)引入WdatePicker插件

<script type="text/javascript" src="calendar/WdatePicker.js" ></script>

(1)没有对控件进行设置

<input class="Wdate" type="text" onfocus="WdatePicker()"/>

(2)限制日期范围 2018-12-15到2018-12-25

<input id="date1" class="Wdate" type="text" onfocus="WdatePicker({minDate: '2018-12-15', maxDate: '2018-12-25' })"/>

(3)限制时间范围 2018-12-15 12:00:00 到 2018-12-25 12:30:00

<input type="text" class="Wdate" 
onfocus="WdatePicker({dateFmt: 'yyyy-MM-dd HH:mm:ss',minDate: '2018-12-15 12:00:00', maxDate: '2018-12-25 12:30:00' })" value="2018-12-16 10:30:00"/>

(4)限制日期范围是2018年7月到2018年12月

<input type="text" class="Wdate"  onfocus="WdatePicker({dateFmt: 'yyyy年M月', minDate: '2018-7', maxDate: '2018-12' })"/>

(5)限制时间范围是 8:00:00到11:30:00

<input type="text" class="Wdate"  onfocus="WdatePicker({dateFmt: 'H:mm:ss', minDate: '8:00:00', maxDate: '11:30:00' })"/>

(6)只能选今天以前的日期(包括今天)

<input class="Wdate" type="text" onfocus="WdatePicker({maxDate: '%y-%M-%d' })"/>

(7)只能选今天以后的日期(不包括今天)

<input class="Wdate" type="text" onfocus="WdatePicker({minDate: '%y-%M-#{%d+1}' })"/>

(8)只能选本月日期

<input class="Wdate" type="text" onfocus="WdatePicker({minDate: '%y-%M-01', maxDate: '%y-%M-%ld' })"/>

(9)只能今天7:00:00到明天21:00:00

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

(10)只能20小时前到30小时后

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

(11)前面的日期不能大于后面的日期

注意：两个日期的日期格式必须相同.dp. 相当于 document.getElementById 函数

#F{$dp.$D(\'myDate_2\')||\'2020-10-01\'} 表示当 myDate_2 为空时, 采用 2020-10-01 的值作为最大值

<input id="myDate_1" class="Wdate" type="text" onFocus="WdatePicker({maxDate: '#F{$dp.$D(\'myDate_2\')||\'2020-10-01\'}' })"/>
<input id="myDate_2" class="Wdate" type="text" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'myDate_1\')}' ,maxDate:'2020-10-01' })"/>