纯javascript制作日历控件

本文给大家分享的是使用纯javascript实现的日历控件的代码，笔者也是第一次写控件，摸索着前行，

以前要用到日历控件都是直接从网上下载一套源码来使用，心里一直有个梗，就是想自己动手写一个日历控件，最近刚好来了兴趣，时间上也允许，于是自己摸索写了一个，功能还算完善，界面就凑合了。可能最值得说的一点就是让input控件内部右边显示一个按钮，我是直接给input加了个背景，然后把input的边框去掉实现的。

这个是最初版的，再往后打算做出纯javascript版的，再往后打算用JQuery做一套。

1. <!doctype html> 
2. <html> 
3. <head> 
4. <meta charset="utf-8"> 
5. <title>日历控件</title> 
6. <style> 
7. #date_text { 
8. background-image: url(images/input.png); 
9. background-repeat:no-repeat; 
10. width: 198px; 
11. height: 27px; 
12. border:none; 
13. padding-left:5px; 
14. cursor:pointer; 
15. } 
16.  
17. #cal_body { 
18. width: 198px; 
19. height: auto; 
20. overflow:hidden; 
21. border: solid 1px #CCCCCC; 
22. display: none; 
23. position:absolute; 
24. z-index:10; 
25. } 
26.  
27. .line { 
28. width:100%; 
29. height:26px; 
30. float:left; 
31. background-color:#0FF; 
32. font-size:14px; 
33. } 
34.  
35. .cube { 
36. float:left; 
37. width:26px; 
38. height:26px; 
39. line-height:26px; 
40. text-align:center; 
41. margin-left:2px; 
42. margin-bottom:2px; 
43. } 
44.  
45. .btn { 
46. float:left; 
47. background-color:#CCC; 
48. margin-left:10px; 
49. width:20px; 
50. height:20px; 
51. text-align:center; 
52. line-height:20px; 
53. border-radius:3px; 
54. border:solid 1px; 
55. margin-top:2px; 
56. cursor:pointer; 
57. } 
58.  
59. .year_month { 
60. float:left; 
61. margin-left:10px; 
62. width:90px; 
63. height:19px; 
64. text-align:center; 
65. line-height:19px; 
66. border-radius:6px; 
67. } 
68.  
69. .end_tag { 
70. height:26px; 
71. line-height:26px; 
72. margin-left:10px; 
73. } 
74. </style> 
75. <script> 
76. Date.prototype.toFormatString = function(){ 
77. var result = this.getFullYear() + "-" + (this.getMonth() + 1) + "-" + this.getDate(); 
78. return result; 
79. }; 
80.  
81. var today = new Date(); 
82. var month_big = new Array("1","3","5","7","8","10","12"); //包含所有大月的数组 
83. var month_small = new Array("4","6","9","11"); //包含所有小月的数组  
84.  
85. //判断数组array中是否包含元素obj的函数，包含则返回true，不包含则返回false 
86. function array_contain(array, obj){ 
87. for (var i = 0; i < array.length; i++){ 
88. if (array[i] == obj) 
89. return true; 
90. } 
91. return false; 
92. } 
93.  
94. //判断年份year是否为闰年，是闰年则返回true，否则返回false 
95. function isLeapYear(year){ 
96. var a = year % 4; 
97. var b = year % 100; 
98. var c = year % 400; 
99. if( ( (a == 0) && (b != 0) ) || (c == 0) ){ 
100. return true; 
101. } 
102. return false; 
103. } 
104.  
105. function hideCalendar(){ 
106. var calbody = document.getElementById("cal_body"); 
107. cal_body.style.display = "none"; 
108. } 
109.  
110. function showCalendar(){  
111. var calbody = document.getElementById("cal_body"); 
112. var style = getDefaultStyle(calbody,"display"); 
113. if(style == "none") 
114. cal_body.style.display = "block"; 
115. if(style == "block") 
116. cal_body.style.display = "none"; 
117.  
118. var date_text = document.getElementById("date_text"); 
119. var val = date_text.value; 
120. init(val); 
121. } 
122.  
123. function init(val){  
124. clearCube(); 
125.  
126. var temp_date; 
127. var date_text = document.getElementById("date_text"); 
128. if(val == ""){ 
129. temp_date = today; 
130. date_text.value = today.toFormatString(); 
131. } 
132. else{ 
133. temp_date = new Date(val);  
134. } 
135.  
136. var year = temp_date.getFullYear(); 
137. var month = temp_date.getMonth() + 1; 
138. var date = temp_date.getDate(); 
139. temp_date.setDate(1); 
140.  
141. var start = temp_date.getDay() + 7; 
142. var end; 
143.  
144. if(array_contain(month_big, month)){ 
145. end = start + 31; 
146. } 
147. else if(array_contain(month_small, month)){ 
148. end = start + 30; 
149. } 
150. else{ 
151. if(isLeapYear(year)){ 
152. end = start + 29; 
153. } 
154. else{ 
155. end = start + 28; 
156. } 
157. } 
158.  
159. for(var i = start; i < end; i++){ 
160. var cube = document.getElementsByClassName("cube").item(i); 
161. cube.innerHTML = i - start + 1; 
162.  
163. cube.style.cursor = "pointer"; 
164. cube.onmouseover = function(){ 
165. this.style.backgroundColor = '#0FF'; 
166. } 
167. if(date == (i - start + 1)) 
168. cube.style.backgroundColor = '#0FF'; 
169. else{ 
170. cube.onmouseout = function(){ 
171. this.style.backgroundColor = ''; 
172. } 
173. } 
174. cube.onclick = function(){ 
175. date_text.value = year + "-" + month + "-" + this.innerHTML; 
176.  
177. cal_body.style.display = "none";  
178. } 
179. } 
180.  
181. document.getElementById("text_year").value = year; 
182. document.getElementById("text_month").value = month; 
183. } 
184.  
185. function clearCube(){ 
186. for(var i=7; i < 49; i++){ 
187. var cube = document.getElementsByClassName("cube").item(i); 
188. cube.innerHTML = ""; 
189. cube.style.backgroundColor = ""; 
190. } 
191. } 
192.  
193. function yearDown(){ 
194. if(isValidated()){ 
195. var old_year = parseInt(document.getElementById("text_year").value); 
196. if(old_year > 1960){ 
197. var year = old_year - 1; 
198. var month = parseInt(document.getElementById("text_month").value); 
199. var val = year + "-" + month + "-" + 1; 
200. init(val); 
201. } 
202. } 
203. } 
204.  
205. function yearUp(){ 
206. if(isValidated()){ 
207. var old_year = parseInt(document.getElementById("text_year").value); 
208. if(old_year < 2050){ 
209. var year = old_year + 1; 
210. var month = parseInt(document.getElementById("text_month").value); 
211. var val = year + "-" + month + "-" + 1; 
212. init(val); 
213. } 
214. } 
215. } 
216.  
217. function monthDown(){ 
218. if(isValidated()){ 
219. var old_month = parseInt(document.getElementById("text_month").value) 
220. if(old_month > 1){ 
221. var year = parseInt(document.getElementById("text_year").value); 
222. var month = old_month - 1; 
223. var val = year + "-" + month + "-" + 1; 
224. init(val); 
225. } 
226. else { 
227. var year = parseInt(document.getElementById("text_year").value) - 1; 
228. var month = 12; 
229. var val = year + "-" + month + "-" + 1; 
230. init(val); 
231. } 
232. } 
233.  
234. } 
235.  
236. function monthUp(){ 
237. if(isValidated()){ 
238. var old_month = parseInt(document.getElementById("text_month").value) 
239. if(old_month < 12){ 
240. var year = parseInt(document.getElementById("text_year").value); 
241. var month = parseInt(document.getElementById("text_month").value) + 1; 
242. var val = year + "-" + month + "-" + 1; 
243. init(val); 
244. } 
245. else { 
246. var year = parseInt(document.getElementById("text_year").value) + 1; 
247. var month = 1; 
248. var val = year + "-" + month + "-" + 1; 
249. init(val); 
250. } 
251. } 
252. } 
253.  
254. function isValidated(){ 
255. var year = document.getElementById("text_year").value; 
256. var month = document.getElementById("text_month").value; 
257. if(isNaN(year) || isNaN(month)){ 
258. alert("请输入正确的年份/月份"); 
259. return false; 
260. } 
261. else{ 
262. if(year%1 != 0 || month%1 != 0){ 
263. alert("请输入正确的年份/月份"); 
264. return false; 
265. } 
266. else{ 
267. year = parseInt(year); 
268. if(year < 1960 || year > 2050){ 
269. alert("请输入1960~2050之间的年份！"); 
270. return false; 
271. } 
272. else if(month < 1 || month >12){ 
273. alert("请输入正确的月份！"); 
274. return false; 
275. } 
276. else{ 
277. return true; 
278. } 
279. } 
280. } 
281. } 
282.  
283. function changed(){ 
284. if(isValidated()){ 
285. var year = document.getElementById("text_year").value; 
286. var month = document.getElementById("text_month").value; 
287. var val = year + "-" + month + "-" + 1; 
288. init(val); 
289. } 
290. } 
291.  
292. function getDefaultStyle(obj,attribute){  
293. return obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute]; 
294. } 
295. </script> 
296. </head> 
297.  
298. <body> 
299. <div id="container"> 
300. <div id="input_bg"><input id="date_text" type="text" readonly onClick="showCalendar()" /></div> 
301. <div id="cal_body"> 
302. <div class="line"><div class="btn" id="year_down" onClick="yearDown()">-</div><input class="year_month" id="text_year" value="2015" onChange="changed()"><div class="btn" id="year_up" onClick="yearUp()">+</div><span class="end_tag">年</span></div> 
303. <div class="line"><div class="btn" id="month_down" onClick="monthDown()">-</div><input class="year_month" id="text_month" value="5" onChange="changed()"><div class="btn" id="month_up" onClick="monthUp()">+</div><span class="end_tag">月</span></div> 
304. <div class="cube">日</div> 
305. <div class="cube">一</div> 
306. <div class="cube">二</div> 
307. <div class="cube">三</div> 
308. <div class="cube">四</div> 
309. <div class="cube">五</div> 
310. <div class="cube">六</div> 
311. <div class="cube"></div> 
312. <div class="cube"></div> 
313. <div class="cube"></div> 
314. <div class="cube"></div> 
315. <div class="cube"></div> 
316. <div class="cube"></div> 
317. <div class="cube"></div> 
318. <div class="cube"></div> 
319. <div class="cube"></div> 
320. <div class="cube"></div> 
321. <div class="cube"></div> 
322. <div class="cube"></div> 
323. <div class="cube"></div> 
324. <div class="cube"></div> 
325. <div class="cube"></div> 
326. <div class="cube"></div> 
327. <div class="cube"></div> 
328. <div class="cube"></div> 
329. <div class="cube"></div> 
330. <div class="cube"></div> 
331. <div class="cube"></div> 
332. <div class="cube"></div> 
333. <div class="cube"></div> 
334. <div class="cube"></div> 
335. <div class="cube"></div> 
336. <div class="cube"></div> 
337. <div class="cube"></div> 
338. <div class="cube"></div> 
339. <div class="cube"></div> 
340. <div class="cube"></div> 
341. <div class="cube"></div> 
342. <div class="cube"></div> 
343. <div class="cube"></div> 
344. <div class="cube"></div> 
345. <div class="cube"></div> 
346. <div class="cube"></div> 
347. <div class="cube"></div> 
348. <div class="cube"></div> 
349. <div class="cube"></div> 
350. <div class="cube"></div> 
351. <div class="cube"></div> 
352. <div class="cube"></div> 
353. </div> 
354. <div> 
355. </body> 
356. </html> 

以上所述就是本文的全部内容了，希望大家能够喜欢。