layui时间范围选择器

最新推荐文章于 2024-07-14 19:25:48 发布

哈皮给

最新推荐文章于 2024-07-14 19:25:48 发布

阅读量939

点赞数

分类专栏：前端技术文章标签： layui

本文链接：https://blog.csdn.net/cuihao_cuihao/article/details/109517614

版权

前端技术专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<link rel="stylesheet" href="../layui/css/layui.css">
		<title></title>
	</head>
	<body>
		<div class="form-list form-list-column">
			<div class="form-label">
				<span class="form-title">选择开始日期：</span>
				<input type="text" id="startDate" placeholder="开始日期">
			</div>
			<div class="form-label">
				<span class="form-title">选择结束日期：</span>
				<input type="text" id="endDate" readonly placeholder="结束日期">
			</div>
		
		</div>
	</body>
	<script src="./layui/layui.js"></script>
	<script>
		layui.use(['laydate'], function() {
			var $ = layui.$;
			var laydate = layui.laydate;
			// 开始时间
			var start = laydate.render({
				elem: '#startDate',
				theme: '#0079c4',
				trigger: 'click',
				btns: ['clear', 'confirm'],
				// showBottom: false,
				done: function(value, date) {
					end.config.min = {
						year: date.year,
						month: date.month - 1,
						date: date.date+1,
						hours: date.hours,
						minutes: date.minutes,
						seconds: date.seconds
					};
					// 作为 结束选择 的 开始时间
					end.config.value = value;
				}
			});
			// 结束时间
			var end = laydate.render({
				// 绑定元素
				elem: '#endDate',
				//  主题色
				theme: '#0079c4',
				//  触发方式
				trigger: 'click',
				// 底部按钮
				btns: ['clear', 'confirm'],
				// showBottom: false,
				// 选择完成回调
				done: function(value, date) {
					start.config.max = {
						year: date.year,
						month: date.month - 1,
						date: date.date-1,
						hours: date.hours,
						minutes: date.minutes,
						seconds: date.seconds
					};
					start.config.value = value;
				}
			});
			laydate.render(start);
			laydate.render(end);
			
		});
	</script>

</html>

哈皮给

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
layui时间范围选择器

<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="styleshee
复制链接

扫一扫

专栏目录