日历jquery

先上效果：

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
}复制