Layui_LayDate组件限制min和max

最新推荐文章于 2022-01-10 16:46:56 发布

原创最新推荐文章于 2022-01-10 16:46:56 发布 · 2.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Layui #LayDate #HTML

H5 专栏收录该内容

41 篇文章

订阅专栏

本文介绍如何使用LayUI的laydate组件来实现日期区间的选择功能，通过两个输入框分别设置起始时间和结束时间，并确保结束时间不会早于起始时间。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="js/layui/theme/default/laydate.css" /><!--引用laydata.css样式-->
		<script type="text/javascript" src="js/layui/laydate.js"></script><!--引用laydata.js脚本-->
	</head>
	<body>
		<input type="text" id="Start_Time" />
		<input type="text" id="End_Time"/>
		<script>
			//执行一个laydate实例
			var startTime = laydate.render({
				elem: '#Start_Time', //指定元素
				done: (value, date) => {
					endTime.config.min = {//结束时间最小值修改
						year: date.year,
						month: date.month-1 ,//月份需要减一(否则两个日期相差一个月)
						date: date.date+1 //+1(不能是同一天)
					}
				}
			});
			//执行一个laydate实例
			var endTime = laydate.render({
				elem: '#End_Time', //指定元素
				done: (value, date) => {
					startTime.config.max = {//开始时间最大值修改
						year: date.year,
						month: date.month-1 ,//月份需要减一(否则两个日期相差一个月)
						date: date.date-1//-1(不能是同一天)
					}
				}
			});
		</script>
	</body>
</html>