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

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章