用layui加入一个日历表

要引用layui的js和css样式

<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
 <script src="layui/layui.js"></script>

css样式:

#test-n1 .layui-laydate-content td,
		#test-n1 .layui-laydate-content th {
			width: 87px;
			height: 50px;
		}
<body>
		<!DOCTYPE html>
		<html>

		<head>
			<meta name="viewport" content="width=device-width" />
			<title></title>
			<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
		</head>

		<body>
		<div class="layui-inline" id="test-n1"></div>
			
		<script>
			layui.use('laydate', function(){
			  var laydate = layui.laydate;
			  
			  //执行一个laydate实例
			  laydate.render({
			    elem: '#test-n1'
			    ,position: 'static'
			  });  
			});
		</script>
		</body>

		</html>

		<!--<script src="layui/layui.js"></script>-->
	</body>

</html>

最后的样式

利用layui这样能自动的选择当日日期

猜你喜欢

转载自blog.csdn.net/Sunny_lxm/article/details/84874606