web页面控件之日历控件

缺乏、安全感 2022-09-17 14:24 744阅读 0赞

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

## 功能概述 ##

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

## 页面效果 ##

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

## 功能构件 ##

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

<table> 
 <tbody> 
  <tr> 
   <td>&lt;script type="text/javascript" src="&lt;%=path%&gt;/js/jquery.js"&gt;&lt;/script&gt;<br> &lt;script type="text/javascript" &nbsp;src="&lt;%=path %&gt;/js/date/My97DatePicker/WdatePicker.js"&gt;&lt;/script&gt;</td> 
  </tr> 
 </tbody> 
</table>

2.页面中引用日历控件

<table> 
 <tbody> 
  <tr> 
   <td>&lt;td align="right"&gt;前后时相：&lt;/td&gt;<br> <span style="white-space:pre"></span>&lt;td&gt;&nbsp;<br> <span style="white-space:pre"></span>&lt;input type="text" style="width:96px;height:18px;" &nbsp;name="requireTopicDo.beforedate" value="&lt;s:property value="%{getText('{0,date,yyyy-MM-dd }',{requireTopicDo.beforedate})}"/&gt;"<br> <span style="white-space:pre"></span>id="beforedate" value=""<br> <span style="white-space:pre"></span>οnfοcus="WdatePicker({dateFmt:'yyyy-MM-dd',maxDate:'#F{$dp.$D(\'afterdate\')}'})"<br> <span style="white-space:pre"></span>class="Wdate" readonly="readonly" οnkeydοwn="handle(event)"/&gt;<br> <span style="white-space:pre"></span>&amp;nbsp;&amp;nbsp;至 &amp;nbsp;&amp;nbsp;<br> <span style="white-space:pre"></span>&lt;input type="text" style="width:96px;height:18px;" name="requireTopicDo.afterdate" id="afterdate" value="&lt;s:property value="%{getText('{0,date,yyyy-MM-dd }',{requireTopicDo.afterdate})}"/&gt;"<br> <span style="white-space:pre"></span>value=""<br> <span style="white-space:pre"></span>οnfοcus="WdatePicker({dateFmt:'yyyy-MM-dd',minDate:'#F{$dp.$D(\'beforedate\')}'})"<br> <span style="white-space:pre"></span>class="Wdate" readonly="readonly" οnkeydοwn="handle(event)"/&gt;<br> <span style="white-space:pre"></span>&lt;/td&gt;</td> 
  </tr> 
 </tbody> 
</table>

[Center]: https://img-blog.csdn.net/20131026095031250?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWFuX2Rr/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: /images/20220828/4b3a992fceb14ffb8c86dc1792b51445.png