先上效果:
HTML:
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
2
<!-- 全日历 -->
3
<input type="text" value="" id="output" readonly/>
4
<div id="container">
5
<a href="javascript:change(-1)">prev</a>
6
<a href="javascript:change(1)">next</a>
7
<table id="table">
8
<thead>
9
<tr>
10
<th colspan="7"></th>
11
</tr>
12
<tr>
13
<th>日</th>
14
<th>一</th>
15
<th>二</th>
16
<th>三</th>
17
<th>四</th>
18
<th>五</th>
19
<th>六</th>
20
</tr>
21
</thead>
22
<tbody>
23
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
24
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
25
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
26
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
27
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
28
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
29
</tbody>
30
31
32
</table>
33
</div>
CSS:
input{
2
background:#eee;
3
display:block;
4
cursor:pointer;
5
position:relative;
6
border:none;
7
margin:10px auto;
8
}
9
div{
10
left:50%;
11
transform:translateX(-50%);
12
position:absolute;
13
border:1px solid #69c;
14
cursor:pointer;
15
display:none;
16
}
17
th,td{
18
width:30px;
19
height:10px;
20
text-align:center;
21
22
}
23
.select{
24
background:#69c;
25
color:white;
26
}
JS:
input{
2
background:#eee;
3
display:block;
4
cursor:pointer;
5
position:relative;
6
border:none;
7
margin:10px auto;
8
}
9
div{
10
left:50%;
11
transform:translateX(-50%);
12
position:absolute;
13
border:1px solid #69c;
14
cursor:pointer;
15
display:none;
16
}
17
th,td{
18
width:30px;
19
height:10px;
20
text-align:center;
21
22
}
23
.select{
24
background:#69c;
25
color:white;
26
}