日历jquery

先上效果：

HTML：

2

3

4

5
  prev
6
  next
7
  
8
    
9
      
10
      
11
    
12
      
13
       
14
       
15
       
16
       
17
       
18
       
19
       
20
    
21
    
22
    
23
     
24
       
25
       
26
       
27
       
28
       
29
    
30
    
31
    
32
  
 日 
 一 
 二 
 三 
 四 
 五 
 六 

33

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
}