一、下載鏈接
鏈接: 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