定制版日历可以点击日期获取日期

谁借莪１个温暖的怀抱￠ 2022-10-11 12:25 142阅读 0赞

A small calendar using `jQuery`. It can show the month you gave, show the active dates you set, get the month users selected, get the date users selected.

.huicalendar.huicalendar1.huicalendar2 { 
    	width: 180px;
    	padding: 2px;
    	border: 1px solid #ccc;
    	background: #fff;
    }
    .huicalendar.huicalendar1.huicalendar2 th, .huicalendar.huicalendar1.huicalendar2 td { 
    	color: #666;
    	font-size: 12px;
    	font-weight: normal;
    	text-align: center;
    	line-height: 18px;
    	height: 18px;
    }
    
    .huicalendar.huicalendar1.huicalendar2 td { 
    	color: #ccc;
    	cursor: auto;
    }
    .huicalendar.huicalendar1.huicalendar2 td:hover { 
    	background: #fff;
    }
    .huicalendar.huicalendar1.huicalendar2 td.enabled { 
    	color: #666;
    	cursor: pointer;
    }
    .huicalendar.huicalendar1.huicalendar2 td.enabled:hover { 
    	background: #e8ecef;
    }
    .huicalendar.huicalendar1.huicalendar2 .left { 
    	display: inline-block;
    	width: 16px;
    	height: 16px;
    	cursor: pointer;
    	background: url('../images/img.gif') -16px 0 no-repeat;
    }
    .huicalendar.huicalendar1.huicalendar2 .right { 
    	display: inline-block;
    	width: 16px;
    	height: 16px;
    	cursor: pointer;
    	background: url('../images/img.gif') -32px 0 no-repeat;
    }
    .huicalendar.huicalendar1.huicalendar2 thead tr th { 
    	background: #fff;
    }
    .huicalendar.huicalendar1.huicalendar2 .week th { 
    	background: #e8ecef;
    }
    .huicalendar.huicalendar1.huicalendar2 .month { 
    	position: relative;
    	cursor: pointer;
    }
    .huicalendar.huicalendar1.huicalendar2 .month.show { 
    
    }
    .huicalendar.huicalendar1.huicalendar2 .month ul { 
    	display: none;
    	position: absolute;
    	top: 16px;
    	left: -1px;
    	width: 200%;
    	margin: 0;
    	padding: 0;
    	border: 1px solid #ccc;
    	background: #fff;
    }
    .huicalendar.huicalendar1.huicalendar2 .month li { 
    	float: left;
    	width: 50%;
    	list-style: none;
    	cursor: pointer;
    }
    .huicalendar.huicalendar1.huicalendar2 .month li:hover { 
    	background: #e8ecef;
    }
    .huicalendar.huicalendar1.huicalendar2 .border-top { 
    	border-top: 1px solid #ccc;
    }

<html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    
    	<script src="jquery.js"></script>
    
    	<link rel="stylesheet" href="huicalendar/css/huicalendar.css">
    	<script src="huicalendar/js/huicalendar.js"></script>
    </head>
    <body>
    	<div class="test">
    		
    	</div>
    
    	<script> $('.test').huicalendar({ enabledDay: [1,2,3], viewDay: new Date('2016/08/01') }).on('changeMonth', function(e){ console.log(e.year) console.log(e.month) $(this).huicalendar({ enabledDay: [4,5,6], viewDay: new Date(e.year+'/'+e.month+'/01') }, 'update') }).on('changeDate', function(e){ console.log(e.year) console.log(e.month) console.log(e.date) }) </script>
    </body>
    </html>