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

绝地灬酷狼 2023-02-14 06:46 16阅读 0赞

### 一、下载链接 ###

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

### 二、基本用法示例 ###

（1）第一步，引入JS。下载后文件如下，

![20200601145919739.png][]

解压后，将文件夹里的东西全部复制到项目的文件夹 WdatePicker 下，在 jsp 中作如下引用即可。

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fsb25lX2luXw_size_16_color_FFFFFF_t_70][]

### 三、深入学习 ###

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

[https://blog.csdn.net/wanglei19880622/article/details/8051322][https_blog.csdn.net_wanglei19880622_article_details_8051322]

[20200601145919739.png]: https://img-blog.csdnimg.cn/20200601145919739.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fsb25lX2luXw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200601170726335.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fsb25lX2luXw==,size_16,color_FFFFFF,t_70
[https_blog.csdn.net_wanglei19880622_article_details_8051322]: https://blog.csdn.net/wanglei19880622/article/details/8051322