日期时间选择插件 - laydate.js

最新推荐文章于 2024-08-13 10:53:05 发布

东成熙就

最新推荐文章于 2024-08-13 10:53:05 发布

阅读量9k

点赞数 1

分类专栏： Javascript JS插件文章标签：日期时间选择插件日历 laydate.js插件

Javascript 同时被 2 个专栏收录

33 篇文章 1 订阅

订阅专栏

JS插件

4 篇文章 0 订阅

订阅专栏

日期时间选择插件 laydate.js

1. 引入JS。官网：http://laydate.layui.com

<script type="text/javascript" src="js/laydate.js"></script>

2. 根据需要做相应的配置。详情参看官网。

<script>
	laydate({
		elem: '#seldate', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
		event: 'focus', //响应事件。如果没有传入event，则按照默认的click
		format: 'YYYY/MM/DD hh:mm:ss', // 分隔符可以任意定义，该例子表示只显示年月
		festival: true, //显示节日
		istime: true, //显示时间选项
		choose: function(datas){ //选择日期完毕的回调
			alert('得到：'+datas);
		}
	});
</script>

实例源码，

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!--
	<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <link href="favicon.ico" rel="Bookmark" type="image/x-icon" />
	-->
	<meta name="Generator" content="EditPlus®">
	<meta name="Author" content="">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<title>layDate日期时间选择插件</title>
	<link href="" rel="stylesheet" />
	<script type="text/javascript" src="js/laydate.js"></script>
</head>
<body>
	<form method="post" action="">
	Way1,
		请选择日期:<input type="text" name="date" οnclick="laydate()" />
		<hr />
	Way2,
		<input type="text" name="date" id='seldate' class="laydate-icon" /><hr />
		<script>
			laydate({
				elem: '#seldate', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
				event: 'focus', //响应事件。如果没有传入event，则按照默认的click
				format: 'YYYY/MM/DD hh:mm:ss', // 分隔符可以任意定义，该例子表示只显示年月
				festival: true, //显示节日
				istime: true, //显示时间选项
				choose: function(datas){ //选择日期完毕的回调
					alert('得到：'+datas);
				}
			});
		</script>
	Way3,
		<input id="seldate1">
		<span class="laydate-icon" οnclick="laydate({elem:'#seldate1'});"></span>
	</form>
</body>
</html>

Find more here：http://laydate.layui.com/