10-日期与时间选择

最新推荐文章于 2024-07-03 11:14:30 发布

本宝宝不开心

最新推荐文章于 2024-07-03 11:14:30 发布

阅读量87

点赞数 1

分类专栏： Layui快速学习

本文链接：https://blog.csdn.net/zh_cn1/article/details/118660122

版权

Layui快速学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

日期与时间选择依靠laydate模块

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>日期与时间选择</title>
	<link rel="stylesheet" type="text/css" href="layui-v2.6.8/layui/css/layui.css">
	<script src="layui-v2.6.8/layui/layui.js" type="text/javascript"></script>
</head>
<body>
	<div class="layui-inline">
		<input type="text" name="layui-input" id="date1"/>
	</div>
	<hr>

	<div class="layui-inline">
		<input type="text" name="layui-input" id="date2"/>
	</div>
	
	<div class="layui-inline">
		<input type="text" name="layui-input" id="date3"/>
	</div>

	<div class="layui-inline">
		<input type="text" name="layui-input" id="date4"/>
	</div>

	<div class="layui-inline">
		<input type="text" name="layui-input" id="date5"/>
	</div>

	<div class="layui-inline">
		<input type="text" name="layui-input" id="date6"/>
	</div>
	<hr>
	<div class="layui-inline">
		<input type="text" name="layui-input" id="date7"/>
	</div>

	<div class="layui-inline">
		<input type="text" name="layui-input" id="date8"/>
	</div>


	<script type="text/javascript">
		
		layui.use('laydate',function(){
			var laydate = layui.laydate;

			//执行一个laydate实列
			laydate.render({
				elem: '#date1' //指定元素 默认年月日选择器
			});

			laydate.render({
				elem: '#date2', //指定元素
				type: "year" //年选择器
			});

			laydate.render({
				elem: '#date3', //指定元素
				type: "month" //年月选择器
			});

			laydate.render({
				elem: '#date4', //指定元素
				type: "time" //时间分秒选择器
			});

			laydate.render({
				elem: '#date5', //指定元素
				type: "datetime" //年月日时间分秒选择器
			});

			laydate.render({
				elem: '#date6', //指定元素
				format: 'yyyy年MM月dd日' //format: 'yyyy/MM/dd'
			});

			laydate.render({
				elem: '#date7', //指定元素
				value: '2021-07-08'
			});

			laydate.render({
				elem: '#date8', //指定元素
				value: new Date(1534766888400)
			});


		});
	</script>

</body>
</html>

本宝宝不开心

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
10-日期与时间选择

日期与时间选择依靠laydate模块<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>日期与时间选择</title> <link rel="stylesheet" type="text/css" href="layui-v2.6.8/layui/css/layui.css"> <script src="layui-v2.6.8/layui/
复制链接

扫一扫

专栏目录