WdatePicker时间控件限制开始结束时间

最新推荐文章于 2020-08-07 14:59:42 发布

原创最新推荐文章于 2020-08-07 14:59:42 发布 · 2.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#WdatePicker #前端

前端专栏收录该内容

1 篇文章

订阅专栏

这篇博客介绍了如何利用WdatePicker前端时间控件，实现开始时间不能大于结束时间以及结束时间不能小于开始时间的限制。通过示例代码展示了在输入框中点击触发日期选择，并设置最大和最小日期为相互关联的另一输入框的日期值。

时间控件限制：

1、开始时间不能大于结束时间 maxDate:'#F{$dp.$D(\'endDate\')}'

2、结束时间不能小于开始时间 minDate:'#F{$dp.$D(\'startDate\')}'

例子：

<div class="control-group">
           <label class="control-label">工作日时间从：</label>
           <div class="controls">
               <input id="workDateStart" name="workDateStart" type="text" readonly="readonly" maxlength="20" class="input-medium Wdate "
                   value="<fmt:formatDate value="${laWorkRecord.workDateStart}" pattern="yyyy-MM-dd HH:mm:ss"/>"
                   onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:false,maxDate:'#F{$dp.$D(\'workDateEnd\')}'});"/>
           </div>
       </div>
       <div class="control-group">
           <label class="control-label">工作日时间到：</label>
           <div class="controls">
               <input id="workDateEnd" name="workDateEnd" type="text" readonly="readonly" maxlength="20" class="input-medium Wdate "
                   value="<fmt:formatDate value="${laWorkRecord.workDateEnd}" pattern="yyyy-MM-dd HH:mm:ss"/>"
                   onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:false,minDate:'#F{$dp.$D(\'workDateStart\')}'});"/>
           </div>
       </div>