layui时间日历的使用之改变时间日历的大小

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/skye_95/article/details/82717946

方法是重新设置日历样式:

#test-n1 .layui-laydate-main{width:600px;}
#test-n1 .layui-laydate-content td,#test-n1 .layui-laydate-content th{width:87px;height: 50px;}

完整代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../../layui/css/layui.css" />
		<style>
			#test-n1 .layui-laydate-main{width:600px;}
			#test-n1 .layui-laydate-content td,#test-n1 .layui-laydate-content th{width:87px;height: 50px;}
		</style>
	</head>
	<body>
		<div class="layui-inline" id="test-n1"></div>
			
		<script type="text/javascript" src="../../layui/layui.js" ></script>
		<script>
			layui.use('laydate', function(){
			  var laydate = layui.laydate;
			  
			  //执行一个laydate实例
			  laydate.render({
			    elem: '#test-n1'
			    ,position: 'static'
			  });  
			});
		</script>
	</body>
</html>

结果图:

猜你喜欢

转载自blog.csdn.net/skye_95/article/details/82717946