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
时间： 2024-10-06 07:19:32