DWZ日历控件

本文详细介绍了DWZ框架中日历控件的使用方法,包括日期格式、日期范围设定、自定义日期和时间格式,以及如何添加选择按钮。示例代码展示了各种不同的日期和时间格式配置,帮助开发者更好地理解和应用该控件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

日历控件

<input type="text" name="xxx" class="date" [dateFmt="yyyy-MM-dd"] [minDate="{%y-80}"] [maxDate="{%y+5}"]/>

日期格式:

 * Field        | Full Form          | Short Form

 * -------------+--------------------+-----------------------

 * Year         | yyyy (4 digits)    | yy (2 digits), y (2 or 4 digits)

 * Month        | MMM (name or abbr.)| MM (2 digits), M (1 or 2 digits)

 *              | NNN (abbr.)        |

 * Day of Month | dd (2 digits)      | d (1 or 2 digits)

 * Day of Week  | EE (name)          | E (abbr)

 * Hour (1-12)  | hh (2 digits)      | h (1 or 2 digits)

 * Hour (0-23)  | HH (2 digits)      | H (1 or 2 digits)

 * Hour (0-11)  | KK (2 digits)      | K (1 or 2 digits)

 * Hour (1-24)  | kk (2 digits)      | k (1 or 2 digits)

 * Minute       | mm (2 digits)      | m (1 or 2 digits)

 * Second       | ss (2 digits)      | s (1 or 2 digits)

 * AM/PM        | a                  |

定义日期范围属性minDate,maxDate静态格式y-M-d或y-M或y,支持以下几种写法:

minDate="2000-01-15" maxDate="2012-12-15"

minDate="2000-01" maxDate="2012-12"

minDate="2000" maxDate="2012"

 

定义日期范围属性minDate,maxDate动态态格式%y-%M-%d或%y-%M或%y,支持以下几种写法:

minDate="{%y-10}-%M-%d" maxDate="{%y}-%M-{%d+1}"

minDate="{%y-10}-%M" maxDate="{%y+10}-%M"

minDate="{%y-10}" maxDate="{%y+10}"

 

示例: 

<p>

      <label>默认格式:</label>

      <input type="text" name="date1" class="date" readonly="true"/>

      <a class="inputDateButton" href="javascript:;">选择</a>

      <span class="info">yyyy-MM-dd</span>

</p>

<p>

      <label>定义日期范围:</label>

      <input type="text" name="date2" value="2000-01-15" class="date" minDate="2000-01-15" maxDate="2012-12-15" readonly="true"/>

      <a class="inputDateButton" href="javascript:;">选择</a>

</p>

<p>

      <label>自定义日期格式:</label>

      <input type="text" name="date3" class="date" dateFmt="yyyy/MM/dd" minDate="2000-01" maxDate="2012-06" readonly="true" />

      <a class="inputDateButton" href="javascript:;">选择</a>

      <span class="info">yyyy/MM/dd</span>

</p>

<p>

      <label>自定义日期格式:</label>

      <input type="text" name="date4" class="date" dateFmt="dd/MM/yyyy" minDate="2000" maxDate="2012" readonly="true"/>

      <a class="inputDateButton" href="javascript:;">选择</a>

      <span class="info">dd/MM/yyyy</span>

</p>

<p>

      <label>动态参数minDate</label>

      <input type="text" name="date5" class="date" dateFmt="dd/MM/yy" minDate="{%y-10}-%M-%d" maxDate="{%y}-%M-{%d+1}"/>

      <a class="inputDateButton" href="javascript:;">选择</a>

      <span class="info">dd/MM/yy</span>

</p>

<p>

      <label>自定义日期格式:</label>

      <input type="text" name="date6" class="date" dateFmt="yyyyMMdd" minDate="2000-01-01" maxDate="2020-12-31"/>

      <a class="inputDateButton" href="javascript:;">选择</a>

      <span class="info">yyyyMMdd</span>

</p>

<p>

      <label>自定义日期格式:</label>

      <input type="text" name="date7" class="date" dateFmt="yyyyMMdd" minDate="2000-01-01" maxDate="2020-12-31"/>

      <a class="inputDateButton" href="javascript:;">选择</a>

      <span class="info">yyyyMMdd</span>

</p>

<p>

      <label>自定义日期格式:</label>

      <input type="text" name="date8" class="date" dateFmt="yMd" minDate="2000-01-01" maxDate="2020-12-31"/>

      <a class="inputDateButton" href="javascript:;">选择</a>

      <span class="info">yMd</span>

</p>

 

<div class="divider"></div>

<h3>日期 + 时间</h3>

<div class="unit">

      <label>自定义日期格式:</label>

      <input type="text" name="date10" class="date" dateFmt="yyyy-MM-dd HH:mm:ss" readonly="true"/>

      <a class="inputDateButton" href="javascript:;">选择</a>

      <span class="info">yyyy-MM-dd HH:mm:ss</span>

</div>

<div class="unit">

      <label>自定义日期格式:</label>

      <input type="text" name="date11" class="date" dateFmt="yyyy-MM-dd HH:mm" readonly="true"/>

      <a class="inputDateButton" href="javascript:;">选择</a>

      <span class="info">yyyy-MM-dd HH:mm</span>

</div>

<div class="unit">

      <label>自定义日期格式:</label>

      <input type="text" name="date12" class="date" dateFmt="yyyy-MM-dd HH:ss" readonly="true"/>

      <a class="inputDateButton" href="javascript:;">选择</a>

      <span class="info">yyyy-MM-dd HH:ss</span>

</div>

     

<div class="unit">

      <label>自定义日期格式:</label>

      <input type="text" name="date13" class="date" dateFmt="yMd H" readonly="true"/>

      <a class="inputDateButton" href="javascript:;">选择</a>

      <span class="info">yMd H</span>

</div>

<div class="unit">

      <label>自定义日期格式:</label>

      <input type="text" name="date14" class="date" dateFmt="EEE HH:mm:ss" readonly="true"/>

      <a class="inputDateButton" href="javascript:;">选择</a>

      <span class="info">EEE HH:mm:ss</span>

</div>

<div class="unit">

      <label>自定义只有时间:</label>

      <input type="text" name="date15" class="date" dateFmt="HH:mm:ss" readonly="true"/>

      <a class="inputDateButton" href="javascript:;">选择</a>

      <span class="info">HH:mm:ss</span>

</div>

<div class="unit">

      <label>自定义时间:</label>

      <input type="text" name="date16" class="date" dateFmt="HH:mm" mmStep="15" readonly="true"/>

      <a class="inputDateButton" href="javascript:;">选择</a>

      <span class="info">HH:mm</span>

</div>

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值