学习网址:http://sentsin.com/layui/laydate
这个日期控件是基于javascript,功能非常强大!
闲话少说我做了一点小练习:
<!--
日期控件laydate的使用.
@author IluckySi
@since 20150128
网址:http://sentsin.com/layui/laydate
核心方法:laydate(options);
options是一个对象,它包含了以下key:'默认值'
elem: '#id',//需显示日期的元素选择器
event: 'click',//触发事件
format: 'YYYY-MM-DD hh:mm:ss', //日期格式
istime: false, //是否开启时间选择
isclear: true, //是否显示清空
istoday: true, //是否显示今天
issure: true, 是否显示确认
festival: true //是否显示节日
min: '1900-01-01 00:00:00', //最小日期
max: '2099-12-31 23:59:59', //最大日期
start: '2014-6-15 23:00:00',//开始日期
fixed: false, //是否固定在可视区域
zIndex: 99999999, //css z-index
choose: function(dates){} //选择好日期的回调
-->
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>laydate日期控件</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" href="laydate/need/laydate.css" type="text/css"></link>
<script type="text/javascript" src="laydate/laydate.js"></script>
<script>
</script>
</head>
<body>
【默认】
<input οnclick="laydate()"><br>
【包含图标】
<input οnclick="laydate()" class="laydate-icon"><br>
【图标触发日期】
<input id="hello1">
<span class="laydate-icon" οnclick="laydate({elem: '#hello1'});"></span><br>
【自定义日期格式】
<div id="test1" class="laydate-icon"></div>
<script>
laydate({
elem: '#test1',
format: 'YYYY/MM',//分隔符可以任意定义,该例子表示只显示年月.
festival: true,//显示节日.
choose: function(datas){//选择日期完毕的回调.
alert('得到:'+datas);
}
});
</script>
【日期范围限定在昨天到明天】
<div id="hello3" class="laydate-icon"></div>
<script>
laydate({
elem: '#hello3',
min: laydate.now(-1),//-1代表昨天,-2代表前天,以此类推.
max: laydate.now(+1)//+1代表明天,+2代表后天,以此类推.
});
</script>
【开始日期和结束日期】
<div>
开始日:<div class="laydate-icon" id="start" style="width:200px; margin-right:10px;"></div>
结束日:<div class="laydate-icon" id="end" style="width:200px;"></div>
</div>
<script>
var start = {
elem: '#start',
format: 'YYYY/MM/DD hh:mm:ss',
min: laydate.now(),//设定最小日期为当前日期
max: '2099-06-16 23:59:59',//最大日期
istime: true,
istoday: false,
choose: function(datas){
end.min = datas;//开始日选好后,重置结束日的最小日期
end.start = datas;//将结束日的初始值设定为开始日
}
};
var end = {
elem: '#end',
format: 'YYYY/MM/DD hh:mm:ss',
min: laydate.now(),
max: '2099-06-16 23:59:59',
istime: true,
istoday: false,
choose: function(datas){
start.max = datas;//结束日选好后,重置开始日的最大日期.
}
};
laydate(start);
laydate(end);
</script>
【选择皮肤】
皮肤有:default,dahong,yalan,qianhuang,danlan,huanglv,yahui,molv等.
<script>
laydate.skin('dahong');
</script>
<input οnclick="laydate()" class="laydate-icon"><br>
</body>
</html>