1. 程式人生 > >layui時間日曆的使用之改變時間日曆的大小

layui時間日曆的使用之改變時間日曆的大小

方法是重新設定日曆樣式:

#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>

結果圖: