layui 实现时间控件联动效果layui 实现时间控件联动效果layui 实现时间控件联动效果layui 实现时间控件

1、效果展示

2、实现代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
		<script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.7.6/layui.min.js" integrity="sha512-jVlfkkRyCyrICx3iFs80jgim5Vmg2xVjAdBRCw/E/ZukJPYpjXfTyyiB1Y1gRsBeAC8CJ+jYIk0teYL4qV85gA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
	</head>
	<body style='margin-top:30px;margin-left:30px'>
		<div class="layui-form-item">
		  <div class="layui-inline">
		    <div class="layui-inline" id="test-range">
		      <div class="layui-input-inline">
		        <input type="text" id="startDate" class="layui-input" placeholder="开始日期">
		      </div>
		      <div class="layui-form-mid">-</div>
		      <div class="layui-input-inline">
		        <input type="text" id="endDate" class="layui-input" placeholder="结束日期">
		      </div>
		    </div>
		  </div>
		</div>
		
		<script> 
		var laydate = layui.laydate;
		laydate.render({ 
		  elem: '#test-range',
		  range: ['#startDate', '#endDate'],
		  type:'date',
		  value:['2023.1.1','2023.2.1'],
		  format:'yyyy.MM.dd'
		});
		</script> 
	</body>
</html>