Un très joli calendrier scénarisé

<script language=javascript> var DS_x,DS_y; function dateSelector() //Construit un objet dateSelector pour implémenter une zone de saisie de date sous forme de calendrier. { var myDate=new Date(); this.year=myDate.getFullYear(); //Définissez l'attribut année, l'année et la valeur par défaut est l'année système actuelle. this.month=myDate.getMonth()+1; //Définissez l'attribut mois, mois, et la valeur par défaut est le mois actuel du système. this.date=myDate.getDate(); //Définit l'attribut de date, day La valeur par défaut est le jour du système actuel. this.inputName=''; //Définit l'attribut inputName, qui est le nom de la zone de saisie. La valeur par défaut est vide. Remarque : plusieurs zones de saisie de date apparaissent sur la même page et il ne peut pas y avoir de noms en double ! this.display=display; //Définit la méthode d'affichage pour afficher la zone de saisie de la date. } function display() //Définit la méthode d'affichage de dateSelector, qui implémentera une boîte de sélection de date sous forme de calendrier. { var week=new Array('日','一','二','三','四','五','六'); document.write("<style type=text/css>" ); document.write(" .ds_font td,span { font: normal 12px 宋体; color: #000000; }"); document.write(" .ds_border { border: 1px solid #000000; curseur: main; couleur d'arrière-plan : #DDDDDD }"); document.write(" .ds_border2 { border: 1px solid #000000; curseur: main; couleur d'arrière-plan: #DDDDDD }"); document.write("</style>"); document. write("<input style='text-align:center;' id='DS_"+this.inputName+"' name='"+this.inputName+"' value='"+this.year+"-"+this. mois+"-"+this.date+"' title=Double-cliquez pour modifier ondblclick='this.readOnly=false;this.focus()' onblur='this.readOnly=true' readonly>"); "<button style='width:60px;height:18px;font-size:12px;margin:1px;border:1px solid #A4B3C8;background-color:#DFE7EF;' type=button onclick=this.nextSibling.style. display='block' onfocus=this.blur()>Sélectionner la date</button>"); document.write("<div style='position:absolute;display:none;text-align:center;width:0px; height:0px;overflow:visible' onselectstart='return false;'>"); document.write(" <div style='position:absolute;left:-60px;top:20px;width:142px;height:165px; background-color:#F6F6F6;border:1px solid #245B7D;' class=ds_font>"); document.write(" <table cellpadding=0 cellpacing=1 width=140 height=20 bgcolor=#CEDAE7 onmousedown='DS_x= event.x-parentNode.style.pixelLeft;DS_y=event.y-parentNode.style.pixelTop;setCapture();' onmouseup='releaseCapture();' onmousemove='dsMove(this.parentNode)' style='curseur : move;'>"); document.write(" <tr align=center>"); document.write(" <td width=12% onmouseover=this.className='ds_border' onmouseout=this.className='' onclick =subYear(this) title='Réduire l'année'><<</td>"); document.write(" <td width=12% onmouseover=this.className='ds_border' onmouseout=this.className='' onclick =subMonth(this) title='Réduire le mois'><</td>"); document.write(" <td width=52%><b>"+this.year+"</b><b> année< /b><b>"+this.month+"</b><b>mois</b></td>"); document.write(" <td width=12% onmouseover=this.className= 'ds_border ' onmouseout=this.className='' onclick=addMonth(this) title='Ajouter un mois'>></td>"); document.write(" <td width=12% onmouseover=this.className=' ds_border' onmouseout=this.className='' onclick=addYear(this) title='Ajouter une année'>>></td>"); document.write(" </tr>"); document.write(" </table >"); document.write(" <table cellpadding=0 cellpacing=0 width=140 height=20 onmousedown='DS_x=event.x-parentNode.style.pixelLeft;DS_y=event.y-parentNode.style. pixelTop; setCapture();' onmouseup='releaseCapture();' onmousemove='dsMove(this.parentNode)' style='cursor:move;'>"); document.write(" <tr align=center>") ; pour (i=0;i<7;i++) document.write(" <td>"+week[i]+"</td>"); document.write(" </tr>"); " </table>"); document.write(" <table cellpadding=0 Cellpacing=2 width=140 bgcolor=#EEEEEE>"); <tr align=center>"); for(j=0;j<7;j++) document.write(" <td width=10% height=16 onmouseover=if(this.innerText!=''&&this. className! ='ds_border2')this.className='ds_border' onmouseout=if(this.className!='ds_border2')this.className='' onclick=getvalue(this,document.all('DS_"+this.inputName+ "' ))></td>"); document.write(" </tr>"); } document.write(" </table>"); document.write(" <span style=cursor:hand onclick =this .parentNode.parentNode.style.display='none'>【Fermer】</span>"); document.write(" </div>"); document.write("</div>"); dateShow (document .all("DS_"+this.inputName).nextSibling.nextSibling.childNodes[0].childNodes[2],this.year,this.month) } function subYear(obj) //Diminuer l'année { var myObj =obj .parentNode.parentNode.parentNode.cells[2].childNodes; monObj[0].innerHTML=eval(myObj[0].innerHTML)-1; dateShow(obj.parentNode.parentNode.parentNode.nextSibling.nextSibling,eval (monObj [0].innerHTML),eval(myObj[2].innerHTML)) } function addYear(obj) //Ajouter une année { var myObj=obj.parentNode.parentNode.parentNode.cells[2].childNodes; .innerHTML=eval(monObj[0].innerHTML)+1; dateShow(obj.parentNode.parentNode.parentNode.nextSibling.nextSibling,eval(monObj[0].innerHTML),eval(monObj[2].innerHTML) ) } function subMonth(obj) //Diminuer le mois { var myObj=obj.parentNode.parentNode.parentNode.cells[2].childNodes; varmonth=eval(myObj[2].innerHTML)-1 if(month= =0; ) { mois=12; subYear(obj); } monObj[2].innerHTML=mois; dateShow(obj.parentNode.parentNode.parentNode.nextSibling.nextSibling,eval(myObj[0].innerHTML),eval(myObj [2 ].innerHTML)) } function addMonth(obj) //Ajouter un mois { var myObj=obj.parentNode.parentNode.parentNode.cells[2].childNodes; varmonth=eval(myObj[2].innerHTML)+1 ; (mois==13) { mois=1; addYear(obj); } monObj[2].innerHTML=mois; dateShow(obj.parentNode.parentNode.parentNode.nextSibling.nextSibling,eval(myObj[0].innerHTML ), eval(myObj[2].innerHTML)) } function dateShow(obj,year,month) //Afficher le jour de chaque mois { var myDate=new Date(year,month-1,1); ); var day=myDate.getDay(); var selectDate=obj.parentNode.parentNode.previousSibling.previousSibling.value.split('-'); var length; cas 7 : cas 8 : cas 10 : cas 12 : longueur=31 ; cas 4 : cas 6 : cas 9 : cas 11 : longueur=30 ; cas 2 : if((année%4==0) && (année%100!=0)||(année%400==0)) longueur=29; sinon longueur=28; } for(i=0;i<obj.cells.length;i++) { obj.cells [ je].innerHTML=''; obj.cells[i].style.color=''; obj.cells[i].className='' } for(i=0;i<longueur;i++) { obj . cellules[i+jour].innerHTML=(i+1); if(année==aujourd'hui.getFullYear()&&(mois-1)==aujourd'hui.getMonth()&&(i+1)==aujourd'hui.getDate ( )) obj.cells[i+day].style.color='red'; if(year==eval(selectDate[0])&&month==eval(selectDate[1])&&(i+1)== eval (selectDate[2])) obj.cells[i+day].className='ds_border2'; } } function getvalue(obj,inputObj) // Passe la date sélectionnée à la zone de saisie { var myObj=inputObj.nextSibling. .childNodes[0].childNodes[0].cells[2].childNodes; if(obj.innerHTML) inputObj.value=myObj[0].innerHTML+"-"+myObj[2].innerHTML+"-"+obj . innerHTML; inputObj.nextSibling.nextSibling.style.display='none'; for(i=0;i<obj.parentNode.parentNode.parentNode.cells.length;i++) obj.parentNode.parentNode.parentNode.cells[i ] .className=''; obj.className='ds_border2' } function dsMove(obj) //Implémenter le glissement de couche { if(event.button==1) { var X=obj.clientLeft; var Y=obj clientTop; .style.pixelLeft=X+(event.x-DS_x); obj.style.pixelTop=Y+(event.y-DS_y); } } </script> De <script language=javascript> var myDate=new dateSelector (); myDate.year--; myDate.inputName='start_date'; //Notez que le nom de la zone de saisie est défini ici. Les noms en double ne peuvent pas apparaître dans la zone de saisie de date sur la même page. maDate.display(); </script>