My97DatePicker是一個更全面，更人性化，並且速度一流的日期選擇控件。具有強大的日期范圍限制功能；自定義事件和豐富的API庫；多語言支持和自定義皮膚支持；跨無限級框架顯示和自動選擇顯示位置。今天我們就開始My97DatePicker的基礎使用。
日期控件My97DataPicker
一、將My97DataPicker的文件部署到eclipse中
My97DataPicker的下載地址：http://www.my97.net/dp/down.asp。下載完成之后，將My97DataPicker文件夾import到WebContent下。或者直接將My97DataPicker文件夾復制到WebContent下。
二、在jsp中使用My97DataPicke
首先引入WdatePicker.js：
<script type="text/javascript" src="<%=request.getContextPath() %>/My97DataPicker/WdatePicker.js"></script>
在jsp中使用：
<input id="startDate" onfocus="WdatePicker()" /> <input id="endDate" onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd HH:mm:ss'})" /> <button onclick="getDate()">提交</button>
三、在js文件中處理時間
<script type="text/javascript">
function getDate() {
var startDate = document.getElementById("startDate").value;
var endDate = document.getElementById("endDate").value;
document.writeln("start: " + startDate + "<br>");
document.writeln("end: " + endDate + "<br>");
document.writeln("type: " + typeof(startDate) + "<br>");
}
</script>
四、訪問結果如下，得到的數值是string類型的。關於My97DataPicker的詳細使用，請參考官方文檔：http://www.my97.net/dp/demo/index.htm
index.jsp的代碼：
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Insert title here</title> <script type="text/javascript" src="<%=request.getContextPath() %>/My97DataPicker/WdatePicker.js"></script> <script type="text/javascript"> function getDate() { var startDate = document.getElementById("startDate").value; var endDate = document.getElementById("endDate").value; document.writeln("start: " + startDate + "<br>"); document.writeln("end: " + endDate + "<br>"); document.writeln("type: " + typeof(startDate) + "<br>"); } </script> </head> <body> <input id="startDate" onfocus="WdatePicker()" /> <input id="endDate" onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd HH:mm:ss'})" /> <button onclick="getDate()">提交</button> </body> </html>
友情鏈接
- My97DataPicker的下載地址： http://www.my97.net/dp/down.asp
- My97DataPicker的官方文檔： http://www.my97.net/dp/demo/index.htm