Date and Color picker

Date and Color picker

Code:

The following is a reference fragment: <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/> <title>infocn.org colors and Dates QQ107800843 Edward: Unemployment </title> <style type= "Text/css" > <!-- #date_ TD, #date_ Th{padding:3px;font-weight:normal;} #date_ Tr:hover TD, #date_ Tr:hover Th{background-color: #ffc;} #date_ tr td:hover{background-color: #fcf;} #date_ U{text-decoration:none;} --> </style> <body> Date <input name= "Date" type= "text" size= "" maxlength= "" "t=" title "value=" 2000-1-1 "/> <input name= "Date" type= "text" size= "" maxlength= "" "t=" title "value=" 2000-1-1 "/> <input name= "Date" type= "text" size= "" maxlength= "" "t=" title "value=" 2009-1-1 "/> <input name= "Date" type= "text" size= "" maxlength= "" "t=" title "value=" 2000-1-1 "/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/> Color <input name= "Date" type= "text" size= "maxlength=" "t=" "title" value= "#FFFFFF"/> <input name= "Date" type= "text" size= "maxlength=" "t=" "title" value= "#FFFFFF"/> <input name= "Date" type= "text" size= "maxlength=" "t=" "title" value= "#FFFFFF"/> <input name= "Date" type= "text" size= "maxlength=" "t=" "title" value= "#FFFFFF"/> <script type= "Text/javascript" > $tmp =[]; function $ (id,n) {return N==null?document.getelementbyid (ID):d ocument.getelementsbyname (ID) [n]} Date function DATE (ID) { Temp (' <table id= "' +id+ '" title= "" summary= "" style= "display:none;position:absolute;top:-200px;left:-800px; Font-size:12px;line-height:12px;background: #DDD; border:1px solid #CCC;p adding:0px; "cellspacing=" 1 "><col style= "COLOR: #FF0000"/><col span= "5"/><col style= "color: #FF0000"/><tr><th > "</th ><th >〈</th><td colspan= "3" ></td><th >〉</th><th >) </th></tr > ' +      ' <tr><th> Day </th><th> one </th><th> two </th><th > Three </th><th> four </th><th> five </th><th> six </th></tr><tbody  Bgcolor= "#FFFFFF" ><tr><td></td><td></td><td></td><td></ Td><td></td><td></td><td> </td></tr><tr><td></td ><td></td><td></td><td></td><td></td><td></td> <td> </td></tr><tr><td></td><td></td><td></td>< Td></td><td></td><td></td><td> &LT;/TD&GT;&LT;/TR&GT;&LT;TR&GT;&LT;TD ></td><td></td><td></td><td></td><td></td><td> </td><td> </td></tr><tr><td></td><td></td><td></ td><td></Td><td></td><td></td><td> </td></tr><tr><td></td ><td></td><td></td><td> year </td><td> month </td><td> close </td ><td> today </td></tr></tbody></table> '); Date (ID)} function Date (id,date,t) { var d=new Date (), o=$ (ID); if (arguments.length>1) {s=date.split (/\d+/i); for (i=s.length;i<3;) s[i++]=1;if (s[1)) s[1]--; if (arguments.length>2) {if (t==1) s[0]--;if (t==2) s[1]--;if (t==3) s[1]++;if (t==4) s[0]++;} D=new Date (s[0],s[1],s[2]); var y=d.getfullyear (), M=d.getmonth () +1,d=d.getdate (), W=d.getday (), W=d.getday (); o.title=y+ '-' +m; var m=[0,31, (y%4==0&&y%100!=0) | | Y%400==0?29:28,31,30,31,30,31,31,30,31,30,31],l= (36+w-d)%7; For (O=o.getelementsbytagname ("TD"), l1=l+m[m]+1,i=1;i<38;i++) {o[i].innertext= (I&GT;L&AMP;&AMP;I&LT;L1)? I-l: " ; O[i].style.backgroundcolor=i-l==d? ' #f66 ': ';} o[0].innertext=y+ '-' +m;} function Date_ (event,s,id) {var o= $tmp [Id],o=event.srcelement?event.srcelement:event.originaltarget;if ( O.nodename.tolowercase () = = ' TD ') {if (o.innerhtml== ' off ') o.parentnode.parentnode.parentnode.style.left= ' -900px '; if (o.innerhtml== ' Today ') date (ID); $s =parseint (o.innerhtml); if (!isnan ($s) && $s >0&& $s <32) {o.value=s+ '-' + $s; O. parentnode.parentnode.parentnode.style.left= ' -900px ';}} function Focus (Id,o) {$tmp [Id]=o;var t=o.offsettop+o.offsetheight,l=o.offsetleft;while (o=o.offsetparent) {t+= O.offsettop;l+=o.offsetleft;} var c=$ (ID); if (c) {c.style.left= l+ ' px '; c.style.top= t+ ' px '; c.style.display= ' block '; C.focus (); $tmp [id+ ' _xy ']]=l+ ' +t}} Color function color (id) {var t=[],r=[' fc ', '% ', '],g= ' fc96300369cf ', b= ' fc96300369cffc9630 ', i=0;for (i=0;i<12;i++) { for (l=0;l<18;l++) t[++i]=r[parseint (L/6)].charat (parseint (I/6)) +g.charat (I) +b.charat (l); t[i]+= ' </tr>\n <tr> ';} T[i]=t[i].slice (0,3); Temp (' <table id= "' +id+ '" style= "position:absolute;left:-900px;top:500px" width= "180" height= "" border= "0" cellpadding= "0" cellspacing= "1" bgcolor= "#CCCCCC" ><caption style= "background: #ccc; font-size:12px;" > Close </caption>\n<tr> ' +t.join ('). replace (/([fc9630]) ([fc9630]) ([fc9630])/gm, ' <td bgcolor= ' #$1$ 1$2$2$3$3 "></td>") + ' </tr>\n</table> ');} function Color_ (event,id) {var o= $tmp [Id],o=event.srcelement?event.srcelement:event.originaltarget;if ( O.nodename.tolowercase () = = ' td ' &&o!=null) {o.value=o.bgcolor;o.style.backgroundcolor=o.bgcolor;o.parentnode.parentnode.parentnode.style.left= ' -900px ';} if (o.nodename.tolowercase () = = ' caption ' &&o!=null) o.parentnode.style.left= ' -900px ';} function Temp (s) {if (!$ (' _temp_ ')) {var o=document.createelement ("div");d ocument.body.appendChild (o); O.style.display= ' None '; O.id= ' _temp_ '; o.style.position= ' absolute '; o.style.left= ' -900px '; } $ (' _temp_ '). insertAdjacentHTML (' Afterend ', s)} /* @cc_on window.onunload=collectgarbage;@*/ /* @if (@_jscript) Document.nativegetelementbyid=document.getelementbyid;document.getelementbyid = function (id) {var elem = Document.nativegetelementbyid (ID); if (elem) {if (elem.attributes[' id '].value==id) {return elem;} Else{for (Var i=1;i<document.all[id].length;i++) {if (document.all[id][i].attributes[' id '].value = = ID) {return Document.all[id][i];}}} return null;}; $ ("__ie_onload"). Onreadystatechange=function () {if (This.readystate = = "complete") init (); @else @*///firefox does not support conditional annotation//document.addeventlistener ("domcontentloaded", init, false); Invoke Init after DOM call is complete Htmlelement.prototype.insertadjacenthtml=function (where,htmlstr) {var r=this.ownerdocument.createrange (); R.setstartbefore (this); This.insertadjacentelement (Where,r.createcontextualfragment (HTMLSTR))} Htmlelement.prototype.insertadjacentelement=function (where,o) {switch (where) {case "Beforebegin": This.parentNode.insertBefore (o,this); Break;case "Afterbegin": This.insertbefore (O,this.firstchild); Break;case "BeforeEnd": This.appendchild (o); Break;case "Afterend": if (this.nextsibling) This.parentNode.insertBefore (o,this.nextsibling); else This.parentNode.appendChild (o); break}} htmlelement.prototype.__definesetter__ ("outerHTML", function (SHTML) {var r=this.ownerdocument.createrange (); R.setstartbefore (this); var df=r.createcontextualfragment (SHTML); This.parentNode.replaceChild (df,this); SHTML}); htmlelement.prototype.__definegetter__ ("outerHTML", function () {var attr,attrs=this.attributes,str= "<" + This.tagname;for (var i=0;i<attrs.length;i++) {attr=attrs[i];if (attr.specified) str+= "" +attr.name+ ' = "' + Attr.value+ ' "'}return str+" > "+this.innerhtml+" </"+this.tagname+" > "; }); htmlelement.prototype.__definesetter__ ("InnerText", function (SHTML) {this.textcontent=shtml;}); /* @end @*/ DATE (' date_ '); color (' color_ '); </script> </body>