web页面控件之日历控件

最新推荐文章于 2026-06-10 16:33:19 发布

原创最新推荐文章于 2026-06-10 16:33:19 发布 · 3.6k 阅读

6 ·

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

收录于

web页面开发中一般需要引用日历，如根据一个日期或时间，或者根据一个日期范围或时间范围，查询业务数据。下面介绍一下使用日历控件的使用。

功能概述

web页面中，查询条件为日期范围，开始日期、结束日期。需要实现自动判断结束日期不能小于开始日期等条件的判断。要方便开发人员的使用、调用。

页面效果

开始日期的录入结束日期的录入，日历自动将开始日期之前的日期为灰色屏蔽输入。

功能构件

1.页面中引入构件的相关js库、样式

2.页面中引用日历控件

<td align="right">前后时相：</td>
<td>
<input type="text" style="width:96px;height:18px;" name="requireTopicDo.beforedate" value="<s:property value="%{getText('{0,date,yyyy-MM-dd }',{requireTopicDo.beforedate})}"/>"
id="beforedate" value=""
onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',maxDate:'#F{$dp.$D(\'afterdate\')}'})"
class="Wdate" readonly="readonly" onkeydown="handle(event)"/>
  至   
<input type="text" style="width:96px;height:18px;" name="requireTopicDo.afterdate" id="afterdate" value="<s:property value="%{getText('{0,date,yyyy-MM-dd }',{requireTopicDo.afterdate})}"/>"
value=""
onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',minDate:'#F{$dp.$D(\'beforedate\')}'})"
class="Wdate" readonly="readonly" onkeydown="handle(event)"/>
</td>