web页面控件之日历控件

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

功能概述

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

页面效果

开始日期的录入

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

功能构件

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

<script type="text/javascript" src="<%=path%>/js/jquery.js"></script> <script type="text/javascript" src="<%=path %>/js/date/My97DatePicker/WdatePicker.js"></script>

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>