舞动的灵魂版js日历，完全采用js实现，故而实现了与语言无关，jsp、asp.net php asp均可使用.无论你是开发软件，还是网站，均是不可或缺的实用代码。
该日历主要实现了获取当前时间时分秒，年月日星期，动态生成选择年的select，月的select，然后根据你所选中的年月，显示该年月对应的这一个月的日期。
点击上一个月，下一个月按钮，在下拉列表中显示对应的年月
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 #calendar {
8 position: absolute;
9 padding: 5px;
10 border: 1px solid #000000;
11 background: #8f3349;
12 display: none;
13 }
14
15 #todayTime {
16 padding: 5px 0;
17 font-size: 40px;
18 color: white;
19 }
20 #todayDate {
21 padding: 5px 0;
22 font-size: 24px;
23 color: #ffcf88;
24 }
25 #tools {
26 padding: 5px 0;
27 height: 30px;
28 color: white;
29 }
30 #tools .l {
31 float: left;
32 }
33 #tools .r {
34 float: right;
35 }
36 table {
37 width: 100%;
38 color: white;
39 }
40 table th {
41 color: #a2cbf3;
42 }
43 table td {
44 text-align: center;
45 cursor: default;
46 }
47 table td.today {
48 background: #cc2951;
49 color: white;
50 }
51 </style>
52 <script>
53 window.onload = function() { 54
55 var text1 = document.getElementById('text1'); 56
57 text1.onfocus = function() { 58 calendar(); 59 } 60
61 // calendar();
62
63 function calendar() { 64
65 var calendarElement = document.getElementById('calendar'); 66 var todayTimeElement = document.getElementById('todayTime'); 67 var todayDateElement = document.getElementById('todayDate'); 68 var selectYearElement = document.getElementById('selectYear'); 69 var selectMonthElement = document.getElementById('selectMonth'); 70 var showTableElement = document.getElementById('showTable'); 71 var prevMonthElement = document.getElementById('prevMonth'); 72 var nextMonthElement = document.getElementById('nextMonth'); 73
74 calendarElement.style.display = 'block'; 75
76 /*
77 * 获取今天的时间 78 * */
79 var today = new Date(); 80
81 //设置日历显示的年月
82 var showYear = today.getFullYear(); 83 var showMonth = today.getMonth(); 84
85 //持续更新当前时间
86 updateTime(); 87
88 //显示当前的年月日星期
89 todayDateElement.innerHTML = getDate(today); 90
91 //动态生成选择年的select
92 for (var i=1970; i<2020; i++) { 93 var option = document.createElement('option'); 94 option.value = i; 95 option.innerHTML = i; 96 if ( i == showYear ) { 97 option.selected = true; 98 } 99 selectYearElement.appendChild(option); 100 } 101 //动态生成选择月的select
102 for (var i=1; i<13; i++) { 103 var option = document.createElement('option'); 104 option.value = i - 1; 105 option.innerHTML = i; 106 if ( i == showMonth + 1 ) { 107 option.selected = true; 108 } 109 selectMonthElement.appendChild(option); 110 } 111
112 //初始化显示table
113 showTable(); 114
115 //选择年
116 selectYearElement.onchange = function() { 117 showYear = this.value; 118 showTable(); 119 showOption(); 120 } 121
122 //选择月
123 selectMonthElement.onchange = function() { 124 showMonth = Number(this.value); 125 showTable(); 126 showOption(); 127 } 128
129 //上一个月
130 prevMonthElement.onclick = function() { 131 showMonth--; 132 showTable(); 133 showOption(); 134 } 135
136 //下一个月
137 nextMonthElement.onclick = function() { 138 showMonth++; 139 showTable(); 140 showOption(); 141 } 142
143
144 /*
145 * 实时更新当前时间 146 * */
147 function updateTime() { 148 var timer = null; 149 //每个500毫秒获取当前的时间，并把当前的时间格式化显示到指定位置
150 var today = new Date(); 151 todayTimeElement.innerHTML = getTime(today); 152 timer = setInterval(function() { 153 var today = new Date(); 154 todayTimeElement.innerHTML = getTime(today); 155 }, 500); 156 } 157
158 function showTable() { 159 showTableElement.tBodies[0].innerHTML = ''; 160 //根据当前需要显示的年和月来创建日历
161 //创建一个要显示的年月的下一个的日期对象
162 var date1 = new Date(showYear, showMonth+1, 1, 0, 0, 0); 163 //对下一个月的1号0时0分0秒的时间 - 1得到要显示的年月的最后一天的时间
164 var date2 = new Date(date1.getTime() - 1); 165 //得到要显示的年月的总天数
166 var showMonthDays = date2.getDate(); 167 //获取要显示的年月的1日的星期,从0开始的星期
168 date2.setDate(1); 169 //showMonthWeek表示这个月的1日的星期，也可以作为表格中前面空白的单元格的个数
170 var showMonthWeek = date2.getDay(); 171
172 var cells = 7; 173 var rows = Math.ceil( (showMonthDays + showMonthWeek) / cells ); 174
175 //通过上面计算出来的行和列生成表格
176 //没生成一行就生成7列
177 //行的循环
178 for ( var i=0; i<rows; i++ ) { 179
180 var tr = document.createElement('tr'); 181
182 //列的循环
183 for ( var j=0; j<cells; j++ ) { 184
185 var td = document.createElement('td'); 186
187 var v = i*cells + j - ( showMonthWeek - 1 ); 188
189 //根据这个月的日期控制显示的数字
190 //td.innerHTML = v;
191 if ( v > 0 && v <= showMonthDays ) { 192
193 //高亮显示今天的日期
194 if ( today.getFullYear() == showYear && today.getMonth() == showMonth && today.getDate() == v ) { 195 td.className = 'today'; 196 } 197
198 td.innerHTML = v; 199 } else { 200 td.innerHTML = ''; 201 } 202
203 td.ondblclick = function() { 204 calendarElement.style.display = 'none'; 205
206 text1.value = showYear + '年' + (showMonth+1) + '月' + this.innerHTML + '日'; 207 } 208
209 tr.appendChild(td); 210
211 } 212
213 showTableElement.tBodies[0].appendChild(tr); 214
215 } 216 } 217
218 function showOption() { 219
220 var date = new Date(showYear, showMonth); 221 var sy = date.getFullYear(); 222 var sm = date.getMonth(); 223 console.log(showYear, showMonth) 224
225 var options = selectYearElement.getElementsByTagName('option'); 226 for (var i=0; i<options.length; i++) { 227 if ( options[i].value == sy ) { 228 options[i].selected = true; 229 } 230 } 231
232 var options = selectMonthElement.getElementsByTagName('option'); 233 for (var i=0; i<options.length; i++) { 234 if ( options[i].value == sm ) { 235 options[i].selected = true; 236 } 237 } 238 } 239 } 240
241 /*
242 * 获取指定时间的时分秒 243 * */
244 function getTime(d) { 245 return [ 246 addZero(d.getHours()), 247 addZero(d.getMinutes()), 248 addZero(d.getSeconds()) 249 ].join(':'); 250 } 251
252 /*
253 * 获取指定时间的年月日和星期 254 * */
255 function getDate(d) { 256 return d.getFullYear() + '年'+ addZero(d.getMonth() + 1) +'月'+ addZero(d.getDate()) +'日 星期' + getWeek(d.getDay()); 257 } 258
259 /*
260 * 给数字加前导0 261 * */
262 function addZero(v) { 263 if ( v < 10 ) { 264 return '0' + v; 265 } else { 266 return '' + v; 267 } 268 } 269
270 /*
271 * 把数字星期转换成汉字星期 272 * */
273 function getWeek(n) { 274 return '日一二三四五六'.split('')[n]; 275 } 276
277 } 278 </script>
279 </head>
280 <body>
281
282 <input type="text" id="text1">
283
284 <div id="calendar">
285
286 <div id="todayTime"></div>
287 <div id="todayDate"></div>
288
289 <div id="tools">
290 <div class="l">
291 <select id="selectYear"></select> 年 292 <select id="selectMonth"></select> 月 293 </div>
294 <div class="r">
295 <span id="prevMonth">∧</span>
296 <span id="nextMonth">∨</span>
297 </div>
298 </div>
299
300 <table id="showTable">
301 <thead>
302 <tr>
303 <th>日</th>
304 <th>一</th>
305 <th>二</th>
306 <th>三</th>
307 <th>四</th>
308 <th>五</th>
309 <th>六</th>
310 </tr>
311 </thead>
312 <tbody></tbody>
313 </table>
314
315 </div>
316
317 </body>
318 </html>
效果：
ps:有什么好的想法和思路可以共同交流成长。群号前端开发学习交流群 486867012