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靜態(tài)格式y(tǒng)-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動態(tài)態(tài)格式%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>動態(tài)參數(shù)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="yyyy年MM月dd日" minDate="2000-01-01" maxDate="2020-12-31"/>
????? <a class="inputDateButton" href="javascript:;">選擇</a>
????? <span class="info">yyyy年MM月dd日</span>
</p>
<p>
????? <label>自定義日期格式:</label>
????? <input type="text" name="date8" class="date" dateFmt="y年M月d日" minDate="2000-01-01" maxDate="2020-12-31"/>
????? <a class="inputDateButton" href="javascript:;">選擇</a>
????? <span class="info">y年M月d日</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="y年M月d日?H點" readonly="true"/>
????? <a class="inputDateButton" href="javascript:;">選擇</a>
????? <span class="info">y年M月d日?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>
?
?
總結(jié)