DWZ日历控件

日历控件

<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-ddspan>

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/ddspan>

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/yyyyspan>

p>

<p>

      <label>动态参数minDatelabel>

      <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/yyspan>

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">yyyyMMddspan>

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">yyyyMMddspan>

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">yMdspan>

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:ssspan>

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:mmspan>

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:ssspan>

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 Hspan>

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:ssspan>

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:ssspan>

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:mmspan>

div>

 DWZ日历控件_第1张图片

 

你可能感兴趣的:(DWZ)