`
fkyq01
  • 浏览: 38369 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

js日历控件

    博客分类：
  • js
JavaScript正则表达式prototype 
阅读更多


第一步：引用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.     yearNow = (yearNow <= 1000)? 1000 : ((yearNow >= 9999)? 9999 : yearNow);   
51.     var yearMin = (yearNow - this.yearFall >= 1000) ? yearNow - this.yearFall : 1000;   
52.     var yearMax = (yearNow + this.yearFall <= 9999) ? yearNow + this.yearFall : 9999;   
53.         yearMin = (yearMax == 9999) ? yearMax-this.yearFall*2 : yearMin;   
54.         yearMax = (yearMin == 1000) ? yearMin+this.yearFall*2 : yearMax;   
55.     for (var i=yearMin; i<=yearMax; i++) this.yearOption += "<option value='"+i+"'>"+i+"年</option>";   
56. }      
57.   
58. function writeIframe()   
59. {   
60.     var strIframe = "<html><head><meta http-equiv='Content-Type' content='text/html; charset=gb2312'><style>"+   
61.     "*{font-size: 12px; font-family: 宋体}"+   
62.     ".bg{  color: "+ WebCalendar.lightColor +"; cursor: default; background-color: "+ WebCalendar.darkColor +";}"+   
63.     "table#tableMain{ width: "+ (cal_Width+2).toString() +"px; height: 180px;}"+   
64.     "table#tableWeek td{ width:14%;color: "+ WebCalendar.lightColor +";}"+   
65.     "table#tableDay  td{ width:14%;font-weight: bold;}"+   
66.     "td#meizzYearHead, td#meizzYearMonth{color: "+ WebCalendar.wordColor +"}"+   
67.     ".out { text-align: center; border-top: 1px solid "+ WebCalendar.DarkBorder +"; border-left: 1px solid "+ WebCalendar.DarkBorder +";"+   
68.     "border-right: 1px solid "+ WebCalendar.lightColor +"; border-bottom: 1px solid "+ WebCalendar.lightColor +";}"+   
69.     ".over{ text-align: center; border-top: 1px solid #FFFFFF; border-left: 1px solid #FFFFFF;"+   
70.     "border-bottom: 1px solid "+ WebCalendar.DarkBorder +"; border-right: 1px solid "+ WebCalendar.DarkBorder +"}"+   
71.     "input{ border: 1px solid "+ WebCalendar.darkColor +"; padding-top: 1px; height: 18px; cursor: hand;"+   
72.     "       color:"+ WebCalendar.wordColor +"; background-color: "+ WebCalendar.btnBgColor +"}"+   
73.     "</style></head><body onselectstart='return false' style='margin: 0px' oncontextmenu='return false'><form name=meizz>";   
74.   
75.     if (WebCalendar.drag){ strIframe += "<scr"+"ipt language=javascript>"+   
76.     "var drag=false, cx=0, cy=0, o = parent.WebCalendar.calendar; function document.onmousemove(){"+   
77.     "if(parent.WebCalendar.drag && drag){if(o.style.left=='')o.style.left=0; if(o.style.top=='')o.style.top=0;"+   
78.     "o.style.left = parseInt(o.style.left) + window.event.clientX-cx;"+   
79.     "o.style.top  = parseInt(o.style.top)  + window.event.clientY-cy;}}"+   
80.     "function document.onkeydown(){ switch(window.event.keyCode){  case 27 : parent.hiddenCalendar(); break;"+   
81.     "case 37 : parent.prevM(); break; case 38 : parent.prevY(); break; case 39 : parent.nextM(); break; case 40 : parent.nextY(); break;"+   
82.     "case 84 : document.forms[0].today.click(); break;} " +   
83.     "try{window.event.keyCode = 0; window.event.returnValue= false;}catch(ee){}}"+   
84.     "function dragStart(){cx=window.event.clientX; cy=window.event.clientY; drag=true;}</scr"+"ipt>"}   
85.   
86.     strIframe += "<table id=tableMain class=bg border=0 cellspacing=2 cellpadding=0>"+   
87.     "<tr><td width='"+ cal_Width +"px' height='19px' bgcolor='"+ WebCalendar.lightColor +"'>"+   
88.     "    <table width='"+ cal_Width +"px' id='tableHead' border='0' cellspacing='1' cellpadding='0'><tr align='center'>"+   
89.     "    <td width='10%' height='19px' class='bg' title='向前翻 1 月&#13;快捷键：←' style='cursor: hand' onclick='parent.prevM()'><b>&lt;</b></td>"+   
90.     "    <td width='45%' id=meizzYearHead "+   
91.     "        onmouseover='this.bgColor=parent.WebCalendar.darkColor; this.style.color=parent.WebCalendar.lightColor'"+   
92.     "        onmouseout='this.bgColor=parent.WebCalendar.lightColor; this.style.color=parent.WebCalendar.wordColor'>" +    
93.     "<select name=tmpYearSelect  onblur='parent.hiddenSelect(this)' style='width:100%;'"+   
94.     "        onchange='parent.WebCalendar.thisYear =this.value; parent.hiddenSelect(this); parent.writeCalendar();'>";   
95.        
96. //    var yearNow = new Date().getFullYear();   
97. //    yearNow = (yearNow <= 1000)? 1000 : ((yearNow >= 9999)? 9999 : yearNow);   
98. //    var yearMin = (yearNow - WebCalendar.yearFall >= 1000) ? yearNow - WebCalendar.yearFall : 1000;   
99. //    var yearMax = (yearNow + WebCalendar.yearFall <= 9999) ? yearNow + WebCalendar.yearFall : 9999;   
100. //        yearMin = (yearMax == 9999) ? yearMax-WebCalendar.yearFall*2 : yearMin;   
101. //        yearMax = (yearMin == 1000) ? yearMin+WebCalendar.yearFall*2 : yearMax;   
102. //    for (var i=yearMin; i<=yearMax; i++) strIframe += "<option value='"+i+"'>"+i+"年</option>";   
103.   
104.     strIframe += WebCalendar.yearOption + "</select>"+   
105.     "</td>"+   
106.     "    <td width='35%' id=meizzYearMonth "+   
107.     "        onmouseover='this.bgColor=parent.WebCalendar.darkColor; this.style.color=parent.WebCalendar.lightColor'"+   
108.     "        onmouseout='this.bgColor=parent.WebCalendar.lightColor; this.style.color=parent.WebCalendar.wordColor'>" +   
109.     "<select name=tmpMonthSelect onblur='parent.hiddenSelect(this)' style='width:100%;'" +       
110.     "        onchange='parent.WebCalendar.thisMonth=this.value; parent.hiddenSelect(this); parent.writeCalendar();'>";   
111.     for (var i=1; i<13; i++) strIframe += "<option value='"+i+"'>"+i+"月</option>";   
112.     strIframe += "</select>"+   
113.     "</td>"+   
114.     "    <td width='10%' class=bg title='向后翻 1 月&#13;快捷键：→' onclick='parent.nextM()' style='cursor: hand'><b>&gt;</b></td></tr></table>"+   
115.     "</td></tr><tr><td height='20px'>"+   
116.     "<table id=tableWeek border=1 width='"+ cal_Width +"px' cellpadding=0 cellspacing=0 ";   
117.     if(WebCalendar.drag){strIframe += "onmousedown='dragStart()' onmouseup='drag=false' ";}   
118.     strIframe += " borderColorLight='"+ WebCalendar.darkColor +"' borderColorDark='"+ WebCalendar.lightColor +"'>"+   
119.     "    <tr align=center><td height='20px'>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr></table>"+   
120.     "</td></tr><tr><td valign=top width='"+ cal_Width +"px' bgcolor='"+ WebCalendar.lightColor +"'>"+   
121.     "    <table id=tableDay height='120px' width='"+ cal_Width +"px' border=0 cellspacing=1 cellpadding=0>";   
122.          for(var x=0; x<5; x++){   
123.            strIframe += "<tr>";   
124.            for(var y=0; y<7; y++)   
125.              strIframe += "<td class=out id='meizzDay"+ (x*7+y) +"'></td>";    
126.            strIframe += "</tr>";   
127.          }   
128.          strIframe += "<tr>";   
129.          for(var x=35; x<WebCalendar.dayShow; x++)   
130.            strIframe += "<td class=out id='meizzDay"+ x +"'></td>";   
131.          strIframe +="<td colspan="+(42-WebCalendar.dayShow).toString()+" class=out style='text-align:center;' title='"+ WebCalendar.regInfo +"'>" +    
132.          "<input style=' background-color: " + WebCalendar.btnBgColor +";cursor: hand; padding-top: 2px; width: 44%; height: 100%;' onfocus='this.blur()'"+   
133.          " type=button value='清空' onclick='parent.WebCalendar.objExport.value=\"\";parent.hiddenCalendar()'>" +    
134.          "&nbsp;" +    
135.          "<input style=' background-color: " + WebCalendar.btnBgColor +";cursor: hand; padding-top: 2px; width: 43%; height: 100%;' onfocus='this.blur()'"+   
136.          " type=button value='关闭' onclick='parent.hiddenCalendar()'>" +    
137.          "</td></tr></table>"+   
138.     "</td></tr><tr><td height='20px' width='"+ cal_Width +"px' bgcolor='"+ WebCalendar.lightColor +"'>"+   
139.     "    <table border=0 cellpadding=1 cellspacing=0 width='"+ cal_Width +"px'>"+   
140.     "    <tr><td><input name=prevYear title='向前翻 1 年&#13;快捷键：↑' onclick='parent.prevY()' type=button value='&lt;&lt;'"+   
141.     "    onfocus='this.blur()' style='meizz:expression(this.disabled=parent.WebCalendar.thisYear==1000)'><input"+   
142.     "    onfocus='this.blur()' name=prevMonth title='向前翻 1 月&#13;快捷键：←' onclick='parent.prevM()' type=button value='&lt;&nbsp;'>"+   
143.     "    </td><td align=center><input name=today type=button value='Today' onfocus='this.blur()' style='width: 50px;' title='当前日期&#13;快捷键：T'"+   
144.     "    onclick=\"parent.returnDate(new Date().getDate() +'/'+ (new Date().getMonth() +1) +'/'+ new Date().getFullYear())\">"+   
145.     "    </td><td align=right><input title='向后翻 1 月&#13;快捷键：→' name=nextMonth onclick='parent.nextM()' type=button value='&nbsp;&gt;'"+   
146.     "    onfocus='this.blur()'><input name=nextYear title='向后翻 1 年&#13;快捷键：↓' onclick='parent.nextY()' type=button value='&gt;&gt;'"+   
147.     "    onfocus='this.blur()' style='meizz:expression(this.disabled=parent.WebCalendar.thisYear==9999)'></td></tr></table>"+   
148.     "</td></tr><table></form></body></html>";   
149.     with(WebCalendar.iframe)   
150.     {   
151.         document.writeln(strIframe); document.close();   
152.         for(var i=0; i<WebCalendar.dayShow; i++)   
153.         {   
154.             WebCalendar.dayObj[i] = eval("meizzDay"+ i);   
155.             WebCalendar.dayObj[i].onmouseover = dayMouseOver;   
156.             WebCalendar.dayObj[i].onmouseout  = dayMouseOut;   
157.             WebCalendar.dayObj[i].onclick     = returnDate;   
158.         }   
159.     }   
160. }   
161.   
162. function calendar() //主调函数   
163. {   
164.     var e = window.event.srcElement;   writeIframe();   
165.     var o = WebCalendar.calendar.style; WebCalendar.eventSrc = e;   
166.     if (arguments.length == 0) WebCalendar.objExport = e;   
167.     else WebCalendar.objExport = eval(arguments[0]);   
168.   
169.     WebCalendar.iframe.tableWeek.style.cursor = WebCalendar.drag ? "move" : "default";   
170.     var t = e.offsetTop,  h = e.clientHeight, l = e.offsetLeft, p = e.type;   
171.     while (e = e.offsetParent){t += e.offsetTop; l += e.offsetLeft;}   
172.     o.display = ""; WebCalendar.iframe.document.body.focus();   
173.     var cw = WebCalendar.calendar.clientWidth, ch = WebCalendar.calendar.clientHeight;   
174.     var dw = document.body.clientWidth, dl = document.body.scrollLeft, dt = document.body.scrollTop;   
175.        
176.     if (document.body.clientHeight + dt - t - h >= ch) o.top = (p=="image")? t + h : t + h + 6;   
177.     else o.top  = (t - dt < ch) ? ((p=="image")? t + h : t + h + 6) : t - ch;   
178.     if (dw + dl - l >= cw) o.left = l; else o.left = (dw >= cw) ? dw - cw + dl : dl;   
179.   
180.     if  (!WebCalendar.timeShow) WebCalendar.dateReg = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/;   
181.     else WebCalendar.dateReg = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/;   
182.   
183.     try{   
184.         if (WebCalendar.objExport.value.trim() != ""){   
185.             WebCalendar.dateStyle = WebCalendar.objExport.value.trim().match(WebCalendar.dateReg);   
186.             if (WebCalendar.dateStyle == null)   
187.             {   
188.                 WebCalendar.thisYear   = new Date().getFullYear();   
189.                 WebCalendar.thisMonth  = new Date().getMonth()+ 1;   
190.                 WebCalendar.thisDay    = new Date().getDate();   
191.                 alert("原文本框里的日期有错误！\n可能与你定义的显示时分秒有冲突！");   
192.                 writeCalendar(); return false;   
193.             }   
194.             else  
195.             {   
196.                 WebCalendar.thisYear   = parseInt(WebCalendar.dateStyle[1], 10);   
197.                 WebCalendar.thisMonth  = parseInt(WebCalendar.dateStyle[3], 10);   
198.                 WebCalendar.thisDay    = parseInt(WebCalendar.dateStyle[4], 10);   
199.                 WebCalendar.inputDate  = parseInt(WebCalendar.thisDay, 10) +"/"+ parseInt(WebCalendar.thisMonth, 10) +"/"+    
200.                 parseInt(WebCalendar.thisYear, 10); writeCalendar();   
201.             }   
202.         } else {   
203.           WebCalendar.thisYear   = new Date().getFullYear();   
204.           WebCalendar.thisMonth  = new Date().getMonth()+ 1;   
205.           WebCalendar.thisDay    = new Date().getDate();   
206.           writeCalendar();   
207.         }   
208.     } catch(e) {   
209.       WebCalendar.thisYear   = new Date().getFullYear();   
210.       WebCalendar.thisMonth  = new Date().getMonth()+ 1;   
211.       WebCalendar.thisDay    = new Date().getDate();   
212.       writeCalendar();   
213.     }   
214. }   
215.   
216. function funMonthSelect() //月份的下拉框   
217. {   
218.     var m = isNaN(parseInt(WebCalendar.thisMonth, 10)) ? new Date().getMonth() + 1 : parseInt(WebCalendar.thisMonth);   
219.     var e = WebCalendar.iframe.document.forms[0].tmpMonthSelect;   
220.     e.value = m; //e.focus();    
221.     //window.status = e.style.left;   
222. }   
223.   
224. function funYearSelect() //年份的下拉框   
225. {   
226.     var e = WebCalendar.iframe.document.forms[0].tmpYearSelect;   
227.     var y = isNaN(parseInt(WebCalendar.thisYear, 10)) ? new Date().getFullYear() : parseInt(WebCalendar.thisYear);   
228.     e.value = y; //e.focus();   
229. //    if(e.value == "")   
230. //    {   
231. //      e.value = new Date().getFullYear();   
232. //      WebCalendar.thisYear = e.value;   
233. //    }   
234. }   
235.   
236. function prevM()  //往前翻月份   
237. {   
238.     WebCalendar.thisDay = 1;   
239.     if (WebCalendar.thisMonth==1)   
240.     {   
241.         WebCalendar.thisYear--;   
242.         WebCalendar.thisMonth=13;   
243.     }   
244.     WebCalendar.thisMonth--; writeCalendar();   
245. }   
246.   
247. function nextM()  //往后翻月份   
248. {   
249.     WebCalendar.thisDay = 1;   
250.     if (WebCalendar.thisMonth==12)   
251.     {   
252.         WebCalendar.thisYear++;   
253.         WebCalendar.thisMonth=0;   
254.     }   
255.     WebCalendar.thisMonth++; writeCalendar();   
256. }   
257. function prevY(){WebCalendar.thisDay = 1; WebCalendar.thisYear--; writeCalendar();}//往前翻 Year   
258. function nextY(){WebCalendar.thisDay = 1; WebCalendar.thisYear++; writeCalendar();}//往后翻 Year   
259. function hiddenSelect(e){   
260.   //for(var i=e.options.length; i>-1; i--)e.options.remove(i); e.style.display="none";   
261. }   
262. function getObjectById(id){ if(document.all) return(eval("document.all."+ id)); return(eval(id)); }   
263. function hiddenCalendar(){getObjectById("meizzCalendarLayer").style.display = "none";};   
264. function appendZero(n){return(("00"+ n).substr(("00"+ n).length-2));}//日期自动补零程序   
265. function String.prototype.trim(){return this.replace(/(^\s*)|(\s*$)/g,"");}   
266. function dayMouseOver()   
267. {   
268.     this.className = "over";   
269.     this.style.backgroundColor = WebCalendar.darkColor;   
270.     if(WebCalendar.day[this.id.substr(8)].split("/")[1] == WebCalendar.thisMonth)   
271.     this.style.color = WebCalendar.lightColor;   
272. }   
273. function dayMouseOut()   
274. {   
275.     this.className = "out"; var d = WebCalendar.day[this.id.substr(8)], a = d.split("/");   
276.     this.style.removeAttribute('backgroundColor');   
277.     if(a[1] == WebCalendar.thisMonth && d != WebCalendar.today)   
278.     {   
279.         if(WebCalendar.dateStyle && a[0] == parseInt(WebCalendar.dateStyle[4], 10))   
280.         this.style.color = WebCalendar.lightColor;   
281.         this.style.color = WebCalendar.wordColor;   
282.     }   
283. }   
284. function writeCalendar() //对日历显示的数据的处理程序   
285. {   
286.     var y = WebCalendar.thisYear;   
287.     var m = WebCalendar.thisMonth;    
288.     var d = WebCalendar.thisDay;   
289.     WebCalendar.daysMonth[1] = (0==y%4 && (y%100!=0 || y%400==0)) ? 29 : 28;   
290.     if (!(y<=9999 && y >= 1000 && parseInt(m, 10)>0 && parseInt(m, 10)<13 && parseInt(d, 10)>0)){   
291.         alert("对不起，你输入了错误的日期！");   
292.         WebCalendar.thisYear   = new Date().getFullYear();   
293.         WebCalendar.thisMonth  = new Date().getMonth()+ 1;   
294.         WebCalendar.thisDay    = new Date().getDate(); }   
295.     y = WebCalendar.thisYear;   
296.     m = WebCalendar.thisMonth;   
297.     d = WebCalendar.thisDay;   
298.        
299.     funYearSelect(parseInt(y, 10));   
300.     funMonthSelect(parseInt(m,10));   
301.     //WebCalendar.iframe.meizzYearHead.innerText  = y +" 年";   
302.     //WebCalendar.iframe.meizzYearMonth.innerText = parseInt(m, 10) +" 月";   
303.     WebCalendar.daysMonth[1] = (0==y%4 && (y%100!=0 || y%400==0)) ? 29 : 28; //闰年二月为29天   
304.     var w = new Date(y, m-1, 1).getDay();   
305.     var prevDays = m==1  ? WebCalendar.daysMonth[11] : WebCalendar.daysMonth[m-2];   
306.     for(var i=(w-1); i>=0; i--) //这三个 for 循环为日历赋数据源（数组 WebCalendar.day）格式是 d/m/yyyy   
307.     {   
308.         WebCalendar.day[i] = prevDays +"/"+ (parseInt(m, 10)-1) +"/"+ y;   
309.         if(m==1) WebCalendar.day[i] = prevDays +"/"+ 12 +"/"+ (parseInt(y, 10)-1);   
310.         prevDays--;   
311.     }   
312.     for(var i=1; i<=WebCalendar.daysMonth[m-1]; i++) WebCalendar.day[i+w-1] = i +"/"+ m +"/"+ y;   
313.     for(var i=1; i<WebCalendar.dayShow-w-WebCalendar.daysMonth[m-1]+1; i++)   
314.     {   
315.         WebCalendar.day[WebCalendar.daysMonth[m-1]+w-1+i] = i +"/"+ (parseInt(m, 10)+1) +"/"+ y;   
316.         if(m==12) WebCalendar.day[WebCalendar.daysMonth[m-1]+w-1+i] = i +"/"+ 1 +"/"+ (parseInt(y, 10)+1);   
317.     }   
318.     for(var i=0; i<WebCalendar.dayShow; i++)    //这个循环是根据源数组写到日历里显示   
319.     {   
320.         var a = WebCalendar.day[i].split("/");   
321.         WebCalendar.dayObj[i].innerText    = a[0];   
322.         WebCalendar.dayObj[i].title        = a[2] +"-"+ appendZero(a[1]) +"-"+ appendZero(a[0]);   
323.         WebCalendar.dayObj[i].bgColor      = WebCalendar.dayBgColor;   
324.         WebCalendar.dayObj[i].style.color  = WebCalendar.wordColor;   
325.         if ((i<10 && parseInt(WebCalendar.day[i], 10)>20) || (i>27 && parseInt(WebCalendar.day[i], 10)<12))   
326.             WebCalendar.dayObj[i].style.color = WebCalendar.wordDark;   
327.         if (WebCalendar.inputDate==WebCalendar.day[i])    //设置输入框里的日期在日历上的颜色   
328.         {WebCalendar.dayObj[i].bgColor = WebCalendar.darkColor; WebCalendar.dayObj[i].style.color = WebCalendar.lightColor;}   
329.         if (WebCalendar.day[i] == WebCalendar.today)      //设置今天在日历上反应出来的颜色   
330.         {WebCalendar.dayObj[i].bgColor = WebCalendar.todayColor; WebCalendar.dayObj[i].style.color = WebCalendar.lightColor;}   
331.     }   
332. }   
333. function returnDate() //根据日期格式等返回用户选定的日期   
334. {   
335.     if(WebCalendar.objExport)   
336.     {   
337.         var returnValue;   
338.         var a = (arguments.length==0) ? WebCalendar.day[this.id.substr(8)].split("/") : arguments[0].split("/");   
339.         var d = WebCalendar.format.match(/^(\w{4})(-|\/)(\w{1,2})\2(\w{1,2})$/);   
340.         if(d==null){alert("你设定的日期输出格式不对！\r\n\r\n请重新定义 WebCalendar.format ！"); return false;}   
341.         var flag = d[3].length==2 || d[4].length==2; //判断返回的日期格式是否要补零   
342.         returnValue = flag ? a[2] +d[2]+ appendZero(a[1]) +d[2]+ appendZero(a[0]) : a[2] +d[2]+ a[1] +d[2]+ a[0];   
343.         if(WebCalendar.timeShow)   
344.         {   
345.             var h = new Date().getHours(), m = new Date().getMinutes(), s = new Date().getSeconds();   
346.             returnValue += flag ? " "+ appendZero(h) +":"+ appendZero(m) +":"+ appendZero(s) : " "+  h  +":"+ m +":"+ s;   
347.         }   
348.         WebCalendar.objExport.value = returnValue;   
349.         hiddenCalendar();   
350.     }   
351. }   
352. //-->  
分享到：
| DOM4J实例
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js日历控件优化

    这里我们将深入探讨如何优化JavaScript日历控件，特别是那些包含时分秒选择，以及支持年月日显示的组件。 1. **性能优化**：在创建日历控件时，减少DOM操作是关键。利用虚拟DOM或仅在必要时更新DOM可以显著提升性能...

    6个JS日历控件个JS日历控件

    JavaScript（JS）日历控件是网页开发中常用的一种组件，用于展示日期选择功能，通常在表单中作为输入辅助工具出现。它们可以提供用户友好的界面，方便用户选择日期，而无需手动输入。以下是对JS日历控件的一些详细...

    js日历控件 英文版

    JavaScript日历控件是网页应用中常见的一种交互元素，它允许用户方便地选择日期，常用于事件安排、预订系统或表单输入等场景。在这个英文版的JS日历控件中，开发者为英文操作系统的用户提供了友好的界面和功能。 ...

    js 日历控件

    JavaScript日历控件是一种在网页上实现日期选择功能的交互元素，它允许用户通过图形界面轻松选择日期，常用于表单填写、事件预订等场景。本文将深入探讨JS日历控件的实现原理、特点以及如何在实际项目中应用。 一、...

    好用的js日历控件 多种样式

    总的来说，JavaScript日历控件是一个涉及HTML、CSS和JavaScript综合运用的实践领域。通过选择合适的库、理解和定制样式，以及关注无障碍性，我们可以创建出既美观又实用的日历组件，提升用户的交互体验。

    js 日历控件 calendar 漂亮日历控件

    总之，JavaScript日历控件是一个结合了前端技术与用户体验设计的组件，通过JavaScript的动态特性，我们可以创建功能丰富、用户友好的日期选择工具。在实际项目中，还可以考虑与其他库（如jQuery、React或Vue）集成，...

    史上最强js日历控件

    总的来说，"史上最强js日历控件"可能是一个集成了各种高级特性和自定义选项的JavaScript日历组件，它可以帮助开发者快速地在网页应用中实现强大的日期选择功能。通过深入研究和理解提供的压缩包内容，开发者可以有效...

    js日历控件实例源码

    JavaScript日历控件是一种常用的前端开发工具，它允许用户在网页上方便地选择日期，常用于表单输入、事件预订、时间安排等场景。在这个"js日历控件实例源码"中，我们有两个关键文件：`demo.html`和`setday.js`。 ...

    JavaScript日历控件 六种日历

    JavaScript日历控件是网页开发中常用的一种交互元素，它能帮助用户方便地选择日期，常见于表单输入、事件安排或时间相关的功能。在给定的资源中，包含了六种不同样式的JavaScript日历，这些日历可能具有不同的设计...

    js日历控件兼容所有浏览器

    总的来说，My97 DatePicker是解决JavaScript日历控件跨浏览器兼容性问题的一个强大工具，通过其丰富的功能和广泛的浏览器支持，可以在多种环境中提供一致的用户体验。通过理解其使用方法和注意事项，开发者能够更...

    html js脚本日历控件

    7. **兼容性**：考虑到浏览器的多样性，编写JavaScript日历控件时需要关注跨浏览器的兼容性问题，确保在不同的浏览器（如Chrome、Firefox、Safari、Edge和IE）上都能正常工作。 在提供的文件名中，"calendar.html"...

    简单好看的js日历控件

    日历控件是JavaScript常见的一种功能组件，用于显示日期并允许用户方便地选择特定日期。在网页设计中，一个简单好看的js日历控件可以极大地提升用户体验，尤其是在需要用户输入或选择日期的场景。 创建一个js日历...

    JS日历控件

    JavaScript日历控件是一种常见的前端开发元素，用于在网页中提供日期选择功能。它通常以文本框的形式出现，用户点击后会弹出一个日历视图，用户可以在其中选择日期，然后日历会关闭，文本框自动填充所选日期。这种...

    js 日历控件 calendar

    js 日历控件 calendar，js 日历控件 calendar，js 日历控件 calendar，js 日历控件 calendar，js 日历控件 calendar，js 日历控件 calendar

    6种JavaScript日历控件

    JavaScript日历控件是网页开发中常用的一种交互元素，它为用户提供了一个直观的方式来选择日期，常见于表单、事件管理或在线预订系统等场景。在本文中，我们将深入探讨六种不同的JavaScript日历控件，了解它们的特点...

    适合ASP.NET java 的js日历控件

    "My97DatePicker"就是这样一个满足需求的JavaScript日历控件，尤其适合在ASP.NET和Java项目中使用。 1. **My97DatePicker简介** My97DatePicker是一款由中国开发者设计的高性能、高兼容性的JavaScript日历控件。它...

    js日历控件 js日历控件

    总的来说，JavaScript日历控件是网页交互中不可或缺的一部分，它的实现涉及前端多个技术层面，从基础的HTML/CSS/JS到复杂的库使用和性能优化。理解其工作原理并灵活运用，能帮助开发者创建出更高效、更易用的网页...

    js日历控件大全，很齐全的js日历控件

    JavaScript日历控件是网页开发中常用的一种交互元素，它为用户提供了一个直观的方式来选择日期，常见于表单输入、事件预订或时间管理等场景。在本压缩包“js日历控件大全”中，你将找到一系列可用于网页的JS日历组件...

    js日历控件代码及用法

    JavaScript日历控件是一种在网页上显示日期选择器的交互元素，它允许用户方便地选择日期，常用于表单中的日期输入字段。本教程将深入探讨JavaScript日历控件的实现原理、代码结构以及如何在实际项目中应用。 首先，...

    JS日历控件(可选多个日期、很简单)

    总的来说，这个"JS日历控件"是一个实用的教学资源，适合想要学习JavaScript前端开发的初学者。通过研究这个控件，不仅可以掌握日历控件的实现，还能提升对JavaScript事件处理、DOM操作和浏览器兼容性的理解。

Magicbox
Global site tag (gtag.js) - Google Analytics