一、下载链接
http://www.my97.net/down.asp
二、基本用法示例
(1)第一步,引入JS。下载后文件如下,
解压后,将文件夹里的东西全部复制到项目的文件夹 WdatePicker 下,在 jsp 中作如下引用即可。
<script type="text/javascript" src="${ctx}/WdatePicker/WdatePicker.js"></script>
(2)基础案例
如果有加 class="Wdate" 文本框后面就会有一个小日历的图标。测试一是没有加的,其他是有的,可以对比一下效果。 当WdatePicker.js里的属性:$wdate=true时,在input里加上class="Wdate"就会在选择框右边出现日期图标,如果不喜欢这个样式,可以把class="Wdate"去掉,另外也可以通过修改skin目录下的WdatePicker.css文件来修改样式
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath }" />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="${ctx}/WdatePicker/WdatePicker.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>小白网页</title>
</head>
<body>
<h1>小白学习</h1>
<a>日期框测试一:</a><input id="texBirthday" name="texBirthday" type="text" size="30" value="" maxlength="12"
onclick="WdatePicker()" readonly />
<input id="texBirthday" name="texBirthday" type="text" size="30" value="" maxlength="12"
onfocus="WdatePicker()" readonly /> <br><br>
<a>日期框测试二:</a><input class="Wdate" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'startDate\');}',maxDate:'%y-%M-%d',dateFmt:'yyyy-MM-dd',readOnly:true})"
type="text" style="width: 120px;" id="endDate" name="endDate" value="" readonly="readonly"><br><br>
<a>日期框测试三:</a><input type="text" class="Wdate form-controls" name="beginDate"
onFocus="WdatePicker({dateFmt:'yyyy-MM-dd',readOnly:true});"><br><br>
<a>日期框测试四:</a><input type="text" class="Wdate form-controls" name="beginDate"
onFocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',readOnly:true});"><br><br>
开始时间: <input type="text" class="Wdate form-controls"
onClick="WdatePicker({maxDate:'#F{$dp.$D(\'endDate\')}'})" id="startDate">
结束时间:<input type="text" class="Wdate form-controls"
onClick="WdatePicker({minDate:'#F{$dp.$D(\'startDate\')}'})" id="endDate"><br><br>
</body>
</html>
需要注意的一点是,在测试一中,onclick 和 onfocus 的效果是一样的,但是在其他的测试中,如果不用 onfocus 日期选框就无法弹出;还有一种情况是在设置 position 属性时,不用 onclick 日期选框无法弹出,奇奇怪怪的,具体原因不详……(待各路大神评论)以下是运行效果图:
三、深入学习
如果只是简单的使用,上面两节已经够用了,但是往往我们还需要进行更为复杂的逻辑控制,这时候就需要深入学习才可以啦。小白新手使用,给不了太多案例,先把优秀博文记录下,到时候有空再回来细细学习。