一个超炫的日期控件laydate

最新推荐文章于 2024-06-27 15:05:15 发布

IluckySi

最新推荐文章于 2024-06-27 15:05:15 发布

阅读量1w

点赞数 1

分类专栏： util 文章标签：强大的日期控件 javascript日期控件 laydate 日期控件

本文链接：https://blog.csdn.net/sidongxue2/article/details/43240139

版权

util 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

学习网址: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>