js日历控件


第一步：引用JavaScript(calendar.js)文件

Javascript代码


1. <script?src="js/calendar.js"?type="text/javascript"></script>??

<script src="js/calendar.js" type="text/javascript"></script>


第二步：在需要输入框处，加入以下代码就可以了。

Html代码


1. <input?onfocus="calendar()"?name="designDate"?type="text"?id="designDate"? ??
2. ????????value="<%=new?SimpleDateFormat("yyyy-MM-dd").format(brithday)?%>"/>??

<input onfocus="calendar()" name="designDate" type="text" id="designDate"
                value="<%=new SimpleDateFormat("yyyy-MM-dd").format(brithday) %>"/>



calendar.js

Javascript代码


1. <!-- ??
2. /*?调用方法： ?
3. ??<input?onfocus="calendar()"?name="s2"?type="text"?id="s2"?style="width:100%;"?/> ?
4. */??
5. var?cal_Width?=?180;//定义日历显示的宽度，至少140 ??
6. ??
7. document.write("<div?id='meizzCalendarLayer'?style='position:?absolute;?z-index:?9999;?width:?"?+?(cal_Width+4).toString()?+?"px;?height:?193px;?display:?none'>"); ??
8. document.write("<iframe?name='meizzCalendarIframe'?scrolling='no'?frameborder='0'?width='100%'?height='100%'></iframe></div>"); ??
9. var?WebCalendar?=?new?WebCalendar(); ??
10. ??
11. function?document.onclick(){ ??
12. ????if(WebCalendar.eventSrc?!=?window.event.srcElement)?hiddenCalendar(); ??
13. } ??
14. ??
15. function?WebCalendar()?//初始化日历的设置 ??
16. { ??
17. ????this.regInfo????=?"WEB?Calendar?ver?3.0&#13;关闭的快捷键：[Esc]"; ??
18. ???? ??
19. ????this.dayShow????=?38;???????????????????????//定义页面上要显示的天数,不能小于35,或大于39 ??
20. ????this.daysMonth??=?new?Array(31,?28,?31,?30,?31,?30,?31,?31,?30,?31,?30,?31); ??
21. ????this.day????????=?new?Array(this.dayShow);????????????//定义日历展示用的数组 ??
22. ????this.dayObj?????=?new?Array(this.dayShow);????????????//定义日期展示控件数组 ??
23. ????this.dateStyle??=?null;?????????????????????//保存格式化后日期数组 ??
24. ????this.objExport??=?null;?????????????????????//日历回传的显示控件 ??
25. ????this.eventSrc???=?null;?????????????????????//日历显示的触发控件 ??
26. ????this.inputDate??=?null;?????????????????????//转化外的输入的日期(d/m/yyyy) ??
27. ????this.thisYear???=?new?Date().getFullYear();?//定义年的变量的初始值 ??
28. ????this.thisMonth??=?new?Date().getMonth()+?1;?//定义月的变量的初始值 ??
29. ????this.thisDay????=?new?Date().getDate();?????//定义日的变量的初始值 ??
30. ????this.today??????=?this.thisDay?+"/"+?this.thisMonth?+"/"+?this.thisYear;???//今天(d/m/yyyy) ??
31. ????this.iframe?????=?window.frames("meizzCalendarIframe");?//日历的?iframe?载体 ??
32. ????this.calendar???=?getObjectById("meizzCalendarLayer");??//日历的层 ??
33. ????this.dateReg????=?"";???????????//日历格式验证的正则式 ??
34. ??
35. ????this.yearFall???=?50;???????????//定义显示的年份下拉框的年差值，如果今年是2000年，这里设置为50，就显示1950－2050 ??
36. ????this.format?????=?"yyyy-mm-dd";?//回传日期的格式 ??
37. ????this.timeShow???=?false;????????//是否返回时间 ??
38. ????this.drag???????=?true;?????????//是否允许拖动 ??
39. ????this.darkColor??=?"#95B7F3";????//控件的暗色 ??
40. ????this.lightColor?=?"#FFFFFF";????//控件的亮色 ??
41. ????this.btnBgColor?=?"#E6E6FA";????//控件的按钮背景色 ??
42. ????this.wordColor??=?"#000080";????//控件的文字颜色 ??
43. ????this.wordDark???=?"#DCDCDC";????//控件的暗文字颜色 ??
44. ????this.dayBgColor?=?"#F5F5FA";????//日期数字背景色 ??
45. ????this.todayColor?=?"#FF0000";????//今天在日历上的标示背景色 ??
46. ????this.DarkBorder?=?"#D4D0C8";????//日期显示的立体表达色 ??
47. ???? ??
48. ????this.yearOption?=?""; ??
49. ????var?yearNow?=?new?Date().getFullYear(); ??
50