Wdatepicker日期控件的下载和详细使用说明

一、下载链接

链接: https://pan.baidu.com/s/1h9OhlaveMft5VxtCpbBVkA 提取码: kyjx

二、基本用法示例

（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 日期选框无法弹出，奇奇怪怪的，具体原因不详……（待各路大神评论）以下是运行效果图：

三、深入学习

如果只是简单的使用，上面两节已经够用了，但是往往我们还需要进行更为复杂的逻辑控制，这时候就需要深入学习才可以啦。小白新手使用，给不了太多案例，先把优秀博文记录下，到时候有空再回来细细学习。

https://blog.csdn.net/wanglei19880622/article/details/8051322