Un calendario guionado muy bonito.

<script language=javascript> var DS_x,DS_y; function dateSelector() //Construya un objeto dateSelector para implementar un cuadro de entrada de fecha en forma de calendario. { var myDate=new Date(); this.year=myDate.getFullYear(); //Defina el atributo de año, el año y el valor predeterminado es el año actual del sistema. this.month=myDate.getMonth()+1; //Defina el atributo de mes, el mes y el valor predeterminado es el mes actual del sistema. this.date=myDate.getDate(); //Define el atributo de fecha, día. El valor predeterminado es el día del sistema actual. this.inputName=''; //Defina el atributo inputName, que es el nombre del cuadro de entrada. El valor predeterminado está vacío. Nota: Aparecen varios cuadros de entrada de fechas en la misma página y no puede haber nombres duplicados. this.display=display; //Defina el método de visualización para mostrar el cuadro de entrada de fecha. } function display() //Defina el método de visualización de dateSelector, que implementará un cuadro de selección de fecha en forma de calendario. { var semana=new Array('日','一','二','三','四','五','六'); document.write("<tipo de estilo=texto/css>" ); document.write(" .ds_font td,span { fuente: normal 12px 宋体; color: #000000; }"); document.write(" .ds_border { borde: 1px sólido #000000; cursor: mano; color de fondo : #DDDDDD }"); document.write(" .ds_border2 { borde: 1px sólido #000000; cursor: mano; color de fondo: #DDDDDD }"); document.write("</style>"); documento. write("<estilo de entrada='text-align:center;' id='DS_"+this.inputName+"' nombre='"+this.inputName+"' valor='"+este.año+"-"+this. mes+"-"+this.date+"' title=Haga doble clic para editar ondblclick='this.readOnly=false;this.focus()' onblur='this.readOnly=true' readonly>"); "<estilo del botón='ancho:60px;alto:18px;tamaño de fuente:12px;margen:1px;borde:1px sólido #A4B3C8;color de fondo:#DFE7EF;' tipo=botón al hacer clic=this.nextSibling.style. display='block' onfocus=this.blur()>Seleccionar fecha</button>"); document.write("<div style='position:absolute;display:none;text-align:center;width:0px; altura:0px;desbordamiento:visible' onselectstart='return false;'>"); document.write(" <div style='position:absolute;left:-60px;top:20px;width:142px;height:165px; color de fondo:#F6F6F6;borde:1px sólido #245B7D;' clase=ds_font>"); document.write(" <tabla cellpadding=0 espacio entre celdas=1 ancho=140 alto=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='cursor: mover;'>"); document.write(" <tr align=center>"); document.write(" <td width=12% onmouseover=this.className='ds_border' onmouseout=this.className='' onclick =subAño(este) título='Reducir Año'><<</td>"); document.write(" <td width=12% onmouseover=this.className='ds_border' onmouseout=this.className='' onclick =subMonth(this) title='Reducir mes'><</td>"); document.write(" <td width=52%><b>"+this.year+"</b><b> año< /b><b>"+este.mes+"</b><b>mes</b></td>"); document.write(" <td width=12% onmouseover=this.className= 'ds_border ' onmouseout=this.className='' onclick=addMonth(this) title='Agregar mes'>></td>"); document.write(" <td width=12% onmouseover=this.className=' ds_border' onmouseout=this.className='' onclick=addYear(this) title='Agregar año'>>></td>"); document.write(" </tr>"); document.write(" < /table >"); document.write(" <table cellpadding=0 cellpacing=0 ancho=140 alto=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>") ; para (i=0;i<7;i++) document.write(" <td>"+semana[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'>【Cerrar】</span>"); document.write(" </div>"); document.write("</div>"); dateShow (documento .all("DS_"+this.inputName).nextSibling.nextSibling.childNodes[0].childNodes[2],this.year,this.month) } function subYear(obj) //Disminuir el año { var myObj =obj .parentNode.parentNode.parentNode.cells[2].childNodes; myObj[0].innerHTML=eval(myObj[0].innerHTML)-1; [0].innerHTML),eval(myObj[2].innerHTML)) } function addYear(obj) //Agregar año { var myObj=obj.parentNode.parentNode.parentNode.cells[2].childNodes; .innerHTML=eval(myObj[0].innerHTML)+1; dateShow(obj.parentNode.parentNode.parentNode.nextSibling.nextSibling,eval(myObj[0].innerHTML),eval(myObj[2].innerHTML) ) } function subMonth(obj) // Disminuir el mes { var myObj=obj.parentNode.parentNode.parentNode.cells[2].childNodes var Month=eval(myObj[2].innerHTML)-1; ) { mes=12; subAño(obj); } miObj[2].innerHTML=mes; dateShow(obj.parentNode.parentNode.parentNode.nextSibling.nextSibling,eval(myObj[0].innerHTML),eval(myObj [2] ].innerHTML)) } function addMonth(obj) //Agregar mes { var myObj=obj.parentNode.parentNode.parentNode.cells[2].childNodes var mes=eval(myObj[2].innerHTML)+1; (mes==13) { mes=1; addYear(obj); } myObj[2].innerHTML=month; dateShow(obj.parentNode.parentNode.parentNode.nextSibling.nextSibling,eval(myObj[0].innerHTML), eval(myObj[2].innerHTML)) } function dateShow(obj,year,month) //Mostrar el día de cada mes { var myDate=new Date(year,month-1,1); ); var día=myDate.getDay(); var selectDate=obj.parentNode.parentNode.previousSibling.previousSibling.value.split('-'); var length(mes) { caso 1: caso 3: caso 5: caso 7: caso 8: caso 10: caso 12: longitud=31 caso 4: caso 6: caso 9: caso 11: longitud=30; caso 2: if((año%4==0) && (año%100!=0)||(año%400==0)) longitud=29; else longitud=28 } for(i=0;i<obj.cells.length;i++) { obj.cells [ i].innerHTML=''; obj.cells[i].style.color=''; obj.cells[i].className=''; celdas[i+día].innerHTML=(i+1); if(año==hoy.getFullYear()&&(mes-1)==hoy.getMonth()&&(i+1)==hoy.getDate ( )) obj.cells[i+día].style.color='rojo'; if(año==eval(selectDate[0])&&month==eval(selectDate[1])&&(i+1)== eval (selectDate[2])) obj.cells[i+day].className='ds_border2'; } } function getvalue(obj,inputObj) // Pasa la fecha seleccionada al cuadro de entrada { var myObj=inputObj.nextSibling. .childNodes[0].childNodes[0].cells[2].childNodes; if(obj.innerHTML) inputObj.value=myObj[0].innerHTML+"-"+myObj[2].innerHTML+"-"+obj. internalHTML; 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) //Implementar arrastre de capa { if(event.button==1) { var X=obj.clientLeft; .style.pixelLeft=X+(event.x-DS_x); obj.style.pixelTop=Y+(event.y-DS_y); myDate.year--; myDate.inputName='start_date'; //Tenga en cuenta que el nombre del cuadro de entrada se establece aquí. Los nombres duplicados no pueden aparecer en el cuadro de entrada de fecha en la misma página. miFecha.display(); </script>