日历控件 (js)

系统 1516 0

<!--<br><br>Code highlighting produced by Actipro CodeHighlighter (freeware)<br>http://www.CodeHighlighter.com/<br><br>-->   1  
  2   //////////////////////////////
  3   // UncCalendar 1.0          //
  4   // Author: Zhong@UNC        //
  5   // E-mail: zhong@uncnet.com //
  6   // 06/01/2004               //
  7   //////////////////////////////
  8  
  9  
 10  
 11   function UncCalendar (sName, sDate)
 12   {
 13     /////////////////////////////////////////////////////////////////////////
 14     //定义UncCalendar对象的属性并赋默认值。
 15     //inputValue属性的值为"today"时表示(客户机)当前日期。
 16     //直接在这里把默认值修改成你想要的,使用时你就什么也不用设置了。
 17     this.inputName = sName || "uncDate";
 18     this.inputValue = sDate || "";
 19     this.inputSize = 10;
 20     this.inputClass = "";
 21     this.color = "#333333";
 22     this.bgColor = "#EEEEEE";
 23     this.buttonWidth = 60;
 24     this.buttonWords = "选择日期";
 25     this.canEdits = true;
 26     this.hidesSelects = true;
 27     /////////////////////////////////////////////////////////////////////////
 28  
 29     /////////////////////////////////////////////////////////////////////////
 30     //定义display方法。
 31     this.display = function ()
 32     {
 33       var reDate = /^(19[7-9]\d|20[0-5]\d)\-(0?\d|1[0-2])\-([0-2]?\d|3[01])$/;
 34       if (reDate.test(this.inputValue))
 35       {
 36         var dates = this.inputValue.split("-");
 37         var year = parseInt(dates[0], 10);
 38         var month = parseInt(dates[1], 10);
 39         var mday = parseInt(dates[2], 10);
 40       }
 41       else
 42       {
 43         var today = new Date();
 44         var year = today.getFullYear();
 45         var month = today.getMonth()+1;
 46         var mday = today.getDate();
 47       }
 48       if (this.inputValue == "today")
 49         inputValue = year + "-" + month + "-" + mday;
 50       else
 51         inputValue = this.inputValue;
 52       var lastDay = new Date(year, month, 0);
 53       lastDay = lastDay.getDate();
 54       var firstDay = new Date(year, month-1, 1);
 55       firstDay = firstDay.getDay();
 56       
 57       var btnBorder =
 58         "border-left:1px solid " + this.color + ";" +
 59         "border-right:1px solid " + this.color + ";" +
 60         "border-top:1px solid " + this.color + ";" +
 61         "border-bottom:1px solid " + this.color + ";";
 62       var btnStyle =
 63         "padding-top:3px;cursor:default;width:" + this.buttonWidth + "px;text-align:center;height:18px;top:-9px;" +
 64         "font:normal 12px 宋体;position:absolute;z-index:99;background-color:" + this.bgColor + ";" +
 65         "line-height:12px;" + btnBorder + "color:" + this.color + ";";
 66       var boardStyle = 
 67         "position:absolute;width:1px;height:1px;background:" + this.bgColor + ";top:8px;border:1px solid "+
 68         this.color + ";display:none;padding:3px;";
 69       var buttonEvent =
 70         " onmouseover=\"this.childNodes[0].style.borderBottom='0px';" + 
 71             "this.childNodes[1].style.display='';this.style.zIndex=100;" +
 72             (this.hidesSelects ?
 73             "var slts=document.getElementsByTagName('SELECT');" +
 74             "for(var i=0;i < slts .length;i++)slts[i].style.visibility ='hidden';"
 75              : "") + "\"" +
 76         " onmouseout =\"this.childNodes[0].style.borderBottom='1px  solid " + this.color + "';" +
 77             "this.childNodes[1].style.display ='none';this.style.zIndex=99;"  +
 78             (this.hidesSelects ?
 79             "var slts =document.getElementsByTagName('SELECT');"  +
 80             "for(var i =0;i<slts.length;i++)slts[i].style.visibility='';"
 81              : "") + "\"" +
 82         " onselectstart =\"return  false;\"";
 83       var mdayStyle  = "font:normal 9px Verdana,Arial,宋体;line-height:12px;cursor:default;color:"  + this.color;
 84       var weekStyle  = "font:normal 12px 宋体;line-height:15px;cursor:default;color:"  + this.color;
 85       var arrowStyle  = "font:bold 7px Verdana,宋体;cursor:hand;line-height:16px;color:"  + this.color;
 86       var ymStyle  = "font:bold 12px 宋体;line-height:16px;cursor:default;color:"  + this.color;
 87       var changeMdays 
 88         "var year=parseInt(this.parentNode.cells[2].childNodes[0].innerText);"  +
 89         "var month =parseInt(this.parentNode.cells[2].childNodes[2].innerText);"  +
 90         "var firstDay =new  Date(year,month-1,1);firstDay =firstDay.getDay();"  +
 91         "var lastDay =new  Date(year,month,0);lastDay =lastDay.getDate();"  +
 92         "var tab =this.parentNode.parentNode,  day =1;"  +
 93         "for(var row =2;row<8;row++)"  +
 94         "  for(var col =0;col<7;col++){"  +
 95         "    if(row ==2&&col<firstDay){"  +
 96         "      tab.rows[row].cells[col].innerHTML ='&nbsp;';"  +
 97         "      tab.rows[row].cells[col].isDay =0;}"  +
 98         "    else if(day< =lastDay){"  +
 99         "      tab.rows[row].cells[col].innerHTML =day;"  +
100         "      tab.rows[row].cells[col].isDay =1;day++;}"  +
101         "    else{" +
102         "      tab.rows[row].cells[col].innerHTML ='';"  +
103         "      tab.rows[row].cells[col].isDay =0;}"  +
104         "  }";
105       var pyEvent  =
106         " onclick=\" var y =this.parentNode.cells[2].childNodes[0];y.innerText=parseInt(y.innerText)-1;"  +
107                     changeMdays + "\"";
108       var pmEvent  =
109         " onclick=\" var y =this.parentNode.cells[2].childNodes[0];m=this.parentNode.cells[2].childNodes[2];"  +
110                    "m.innerText =parseInt(m.innerText)-1;if(m.innerText=='0'){m.innerText=12;y.innerText="  +
111                    "parseInt(y.innerText)-1;}" + changeMdays + "\"";
112       var nmEvent  =
113         " onclick=\" var y =this.parentNode.cells[2].childNodes[0];m=this.parentNode.cells[2].childNodes[2];"  +
114                    "m.innerText =parseInt(m.innerText)+1;if(m.innerText=='13'){m.innerText=1;y.innerText="  +
115                    "parseInt(y.innerText)+1;}" + changeMdays + "\"";
116       var nyEvent  =
117         " onclick=\" var y =this.parentNode.cells[2].childNodes[0];y.innerText=parseInt(y.innerText)+1;"  +
118                     changeMdays + "\"";
119       var mdayEvent  =
120         " onmouseover=\" if(event.srcElement.tagName =='TD'&&event.srcElement.isDay){"  +
121             "event.srcElement.style.backgroundColor ='"  + this.color + "';" +
122             "event.srcElement.style.color ='"  + this.bgColor + "';" +
123             "event.srcElement.style.cursor ='hand';"  +
124             "var ym =event.srcElement.parentNode.parentNode.rows[0].cells[2].childNodes;"  +
125             "event.srcElement.title =ym[0].innerText+'-'+ym[2].innerText+'-'+event.srcElement.innerText;}\""  +
126         " onmouseout =\"if(event.srcElement.tagName=='TD'&&event.srcElement.isDay){"  +
127             "event.srcElement.style.backgroundColor ='"  + this.bgColor + "';" +
128             "event.srcElement.style.color ='"  + this.color + "';" +
129             "event.srcElement.style.cursor ='default';"  +
130             "var ym =event.srcElement.parentNode.parentNode.rows[0].cells[2].childNodes;"  +
131             "event.srcElement.title =ym[0].innerText+'-'+ym[2].innerText+'-'+event.srcElement.innerText;}\""  +
132         " onclick =\"if(event.srcElement.tagName=='TD'&&event.srcElement.isDay){"  +
133             "var inp =this.parentNode.parentNode.parentNode.previousSibling.childNodes[0];"  +
134             "inp.value =this.rows[0].cells[2].childNodes[0].innerText+'-'+this.rows[0].cells[2].childNodes[2]."  +
135             "innerText+'-'+event.srcElement.innerText;" +
136             "this.parentNode.style.display ='none';this.parentNode.parentNode.style.zIndex=99;"  +
137             "this.parentNode.previousSibling.style.borderBottom ='1px  solid " + this.color + "';" +
138             (this.hidesSelects ?
139             "var slts =document.getElementsByTagName('SELECT');"  +
140             "for(var i =0;i<slts.length;i++)slts[i].style.visibility='';"
141              : "") + "}\"";
142  
143       var output  = "" ;
144       output + = "<table cellpadding=0 cellspacing=1 style='display:inline;'><tr>" ;
145       output + = "  <td><input size="  + this.inputSize + " maxlength =10  value =\""  + inputValue + "\"";
146       output + =    (this.canEdits  ? "" : " readonly") + " name =\""  + this.inputName + "\" ></ td > ";
147       output += "   < td  width =" + this.buttonWidth + " > ";
148       output += "     < div  style =\"position:absolute;overflow:visible;width:0px;height:0px;\""  + buttonEvent + " > ";
149       output += "       < div  style =\""  + btnStyle + "\" >< nobr > " + this.buttonWords + " </ nobr ></ div > ";
150       output += "       < div  style =\""  + boardStyle + "\" > ";
151       output += "         < table  cellspacing =1  cellpadding =1  width =175"  + mdayEvent + " > ";
152       output += "           < tr  height =20  align =center > ";
153       output += "             < td  style =\""  + arrowStyle + "\" title =\"上一年\""  + pyEvent + " > &lt;&lt; </ td > ";
154       output += "             < td  style =\""  + arrowStyle + "\" align =left  title =\"上个月\""  + pmEvent + " > &lt; </ td > ";
155       output += "             < td  colspan =3  style =\""  + ymStyle + "\" valign =bottom > ";
156       output += "               < span > " + year + " </ span >< span > </ span >< span > " + month + " </ span >< span > </ span > ";
157       output += "             </ td > ";
158       output += "             < td  style =\""  + arrowStyle + "\" align =right  title =\"下个月\""  + nmEvent + " > &gt; </ td > ";
159       output += "             < td  style =\""  + arrowStyle + "\" title =\"下一年\""  + nyEvent + " > &gt;&gt; </ td > ";
160       output += "           </ tr > ";
161       output += "           < tr  height =20  align =center  bgcolor =" + this.bgColor + " > ";
162       output += "             < td  width =14%  style =\""  + weekStyle + "\" > </ td > ";
163       output += "             < td  width =14%  style =\""  + weekStyle + "\" > </ td > ";
164       output += "             < td  width =14%  style =\""  + weekStyle + "\" > </ td > ";
165       output += "             < td  width =14%  style =\""  + weekStyle + "\" > </ td > ";
166       output += "             < td  width =14%  style =\""  + weekStyle + "\" > </ td > ";
167       output += "             < td  width =14%  style =\""  + weekStyle + "\" > </ td > ";
168       output += "             < td  width =14%  style =\""  + weekStyle + "\" > </ td > ";
169       output += "           </ tr > ";
170       var day = 1;
171       for (var row=0; row < 6 ; row++)
172       {
173         output + = "<tr align=center>" ;
174         for (var col =0;  col<7; col++)
175         {
176           if (row  ==  0 && col < firstDay)
177             output + = "<td style=\" " + mdayStyle + "\" > &nbsp; </ td > ";
178           else if (day  < = lastDay )
179           {
180             output + = "<td style=\" " + mdayStyle + "\" isDay =1 > " + day + " </ td > ";
181             day++;
182           }
183           else
184             output += " < td  style =\""  + mdayStyle + "\" ></ td > ";
185         }
186         output += " </ tr > ";
187       }
188       output += "         </ table > ";
189       output += "       </ div > ";
190       output += "     </ div > ";
191       output += "   </ td > ";
192       output += " </ tr ></ table > ";
193       document.write(output);
194     }
195     /////////////////////////////////////////////////////////////////////////
196   }
HTML:
<!--<br><br>Code highlighting produced by Actipro CodeHighlighter (freeware)<br>http://www.CodeHighlighter.com/<br><br>-->  1   < script  src =uc.js ></ script >
 2   < script  language =javascript >
 3   // 拿过来就可以用,很简单。
 4   // 实例化时第一个参数是input的name;第二个参数是value,设为"today"就是当天。
 5      var  date1  =   new  UncCalendar ( " date " " 2008-08-08 " );
 6     date1.display();
 7   </ script >
 8   < br >< br >
 9   < script  language =javascript >
10   // 有一些属性,可以灵活的定制。
11   // 事实上直接到uc.js中修改默认属性值使用起来会更方便一些,里面有注释。
12      var  date2  =   new  UncCalendar ();
13     date2.inputName  =   " date " // input的name。
14     date2.inputValue  =   " today " ;   // 你会看到,input中将显示客户机系统当前时间。
15     date2.inputSize  =   10 ;   // input的size
16     date2.inputClass  =   "" ;   // input的class,这样你就能自己控制input的样式。
17     date2.color  =   " #000080 " ;   // 选择按钮、面板的边框以及日历中字的颜色。
18     date2.bgColor  =   " #EEEEFF " ;   // 选择按钮、面板的背景色。
19     date2.buttonWidth  =   60 ;   // 按钮宽度
20     date2.buttonWords  =   " background-color: rgb(245,
分享到:
评论

日历控件 (js)


更多文章、技术交流、商务合作、联系博主

微信扫码或搜索:z360901061

微信扫一扫加我为好友

QQ号联系: 360901061

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧,狠狠点击下面给点支持吧,站长非常感激您!手机微信长按不能支付解决办法:请将微信支付二维码保存到相册,切换到微信,然后点击微信右上角扫一扫功能,选择支付二维码完成支付。

【本文对您有帮助就好】

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描上面二维码支持博主2元、5元、10元、自定义金额等您想捐的金额吧,站长会非常 感谢您的哦!!!

发表我的评论
最新评论 总共0条评论