日期控件使用总结

1.控件介绍

• DatePicker目录是一个整体,不可破坏里面的目录结构,也不可对里面的文件改名,可以改目录名
• DatePicker.htm 是必须文件,不可删除(4.8以后不存在此文件) 各目录及文件的用途:
  
  • WdatePicker.js 配置文件,在调用的地方仅需使用该文件,可多个共存,以xx_WdatePicker.js方式命名
  • config.js 语言和皮肤配置文件,无需引入(4.8以后合并入WdatePicker.js)
  • calendar.js 日期库主文件,无需引入
  • My97DatePicker.htm 临时页面文件,不可删除(4.8以后不存在此文件)
  • 目录lang 存放语言文件,你可以根据需要清理或添加语言文件
  • 目录skin 存放皮肤的相关文件,你可以根据需要清理或添加皮肤文件包
• 当WdatePicker.js里的属性:$wdate=true时,在input里加上class=”Wdate”就会在选择框右边出现日期图标,如果您不喜欢这个样式,可以把class=”Wdate”去掉,另外也可以通过修改skin目录下的WdatePicker.css文件来修改样式

效果图:

* 点击输入框或者右侧小图标,都可以实现输入日期.

2.引入方式和存在位置

在webapp文件夹下创建一个名为js的文件夹,将日期控件文件复制到该文件中.工程结构如图所示:

3.web.xml中添加拦截路径设置

如果不进行该设置,日期控件相关的文件将被拦截,而不能被成功加载.

注意: 下面这段代码,要写在引入springMVC代码前。

    <!-- 配置拦截路径 -->
    <!-- 同样道理,也对其他的后缀名进行了设置 -->
    <servlet-mapping>
     <servlet-name >default </servlet-name >         
        <url-pattern >*.js</url-pattern>      
     </servlet-mapping >
     <servlet-mapping >
         <servlet-name >default </servlet-name >             
         <url-pattern >*.css</url-pattern>        
    </servlet-mapping >
     <servlet-mapping >
         <servlet-name >default </servlet-name >             
         <url-pattern >*.htm</url-pattern>        
    </servlet-mapping >
     <servlet-mapping >
         <servlet-name >default </servlet-name >             
         <url-pattern >*.gif</url-pattern>        
    </servlet-mapping >

4.在jsp页面中引入控件

(1) 第一种方式:

<script type="text/javascript" src="${pageContext.request.contextPath}/js/datepicker/WdatePicker.js"></script> 

(2)第二种方式:

<%
  String path = request.getContextPath();
  String basePath = request.getScheme() + "://"
                  + request.getServerName() + ":" + request.getServerPort()
                  + path + "/";
%>

<script type="text/javascript" src="<%=basePath %>js/datepicker/WdatePicker.js"></script>

* 两种方式其实事一样的,只是写法不同而已.

5.添加与修改功能页面的使用示例

(1) 添加对象页面,日期输入框在输入日期时,效果同上方效果图所展示:

<input id="hiredate" type="text" style="width:90px;" name="hiredate" value="" onclick="WdatePicker({el:this,isShowOthers:true,dateFmt:'yyyy-MM-dd'});"/>
<img onclick="WdatePicker({el:'hiredate',isShowOthers:true,dateFmt:'yyyy-MM-dd'})" src="${pageContext.request.contextPath}/js/datepicker/skin/datePicker.gif" width="16" height="22" align="absmiddle">

(2) 编辑对象页面,回显原有日期,效果同上方效果图所展示:

<label>入职日期:</label>    

<input id="hiredate" type="text" style="width:90px;" name="hiredate" value="<fmt:formatDate value='${emp.hiredate }' pattern='yyyy-MM-dd' />"
onclick="WdatePicker({el:this,isShowOthers:true,dateFmt:'yyyy-MM-dd'});"/>

<img onclick="WdatePicker({el:'hiredate',isShowOthers:true,dateFmt:'yyyy-MM-dd'})" src="${pageContext.request.contextPath}/js/datepicker/skin/datePicker.gif" width="16" height="22" align="absmiddle"><br/>

6.扩展:对象详情页日期规范化显示设置方式

<!-- 注意:这个标签库一定不要忘记导 -->
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<label>入职日期:</label>    
<input type="text" name="hiredate" value="<fmt:formatDate pattern='yyyy-MM-dd' value='${emp.hiredate}' />" /><br/> 

7.参考文章

(1) DatePicker控件介绍: http://www.my97.net/dp/demo/resource/main.asp