Este calendario puede usarse para insertar fechas en los formularios simplemente seleccionando desde sus propios controles el mes y el año, y pinchando el día deseado.
Prueba seleccionar día, mes y año... En esta misma página se indica cómo cambiar el comportamiento del script.
El fichero: calendario.js es donde se encuentra el script del calendario; solo requiere como parámetros el mes y año que se quiera mostrar, junto con el identificador (tercero de los parámetros) y la el nombre de la función que gestionará la fecha seleccionada, en este caso se trata de la función seleccionaFecha(dd, mm, aa) que recibe los valores día, mes y año en ese órden.
En esta página se ha redefinido con el código siguiente:
function seleccionaFecha(dd, mm, aa) {
var fecha = new Date();
fecha.setDate(dd);
fecha.setMonth(mm - 1);
fecha.setFullYear(aa);
var Semana = ["Dominago","Lunes","Martes","Miércoles","Jueves","Viernes","Sabado"];
var mes = ",enero,febrero,marzo,abril,mayo,junio,julio,agosto,septiembre,octubre,noviembre,diciembre".split(",");
cadena = Semana[fecha.getDay()] + " " + dd + " de " + mes[mm] + " de " + aa;
document.forms.salida.comentario.value = cadena;
}
En el código se puede apreciar la creación de un nuevo objeto "Date" partiendo de la fecha obtenida anteriormente, tan solo para obtener el día de la semana.
El identificador nos servirá también para darle al calendario el aspecto que más nos guste. Puede verse la hoja de estilos de este calendario en esta dirección: calendario.css.
Tan solo debe enlazar con el script, crear los estilos y por último ponr el código que crea el calendario:
<script type="text/javascript" > <!-- _hoy = new Date(); document.writeln(calendar(_hoy.getMonth(), _hoy.getFullYear(), "calendario1", "seleccionaFecha")); //--> </script>
Hay Páginas que abren una ventana emergente para seleccionar una fecha... es algo tan sencillo como poner el script del calendario en una página nueva con el calendario en él y que la función asociada devuelva la fecha seleccionada al sitio deseado.
Vamos a crear un formulario donde se quiera incrustar 2 fechas distintas en sendos campos (entrada y salida)...
<form name="ej" action="" method="get" >
<fieldset style="text-align: center">
<fieldset style="width: 45%; float: left"><legend>entrada</legend>
<input type="text" name="entrada" >
<button type="button" onclick="window.open('popup.html?destino=ej.entrada', '_blank', 'width=264,height=167')">
rellenar fecha1
</button>
</fieldset>
<fieldset ><legend>fecha 2</legend>
<input type="text" name="salida" >
<button type="button" onclick="window.open('popup.html?destino=ej.salida', '_blank', 'width=264,height=167')">
rellenar fecha2
</button>
</fieldset>
</fieldset>
</form>
A partir de este formulario bastaría con definir 2 nuevas funciones en el popup para que funcione el calendario a la perfección: una de ellas leería los parámetros de entrada (también puede hacerse con otros lenguajes como asp, php... pero en javascript es tan sencillo como poner estas líneas en una sección script de la página:
var campoDestino;
var formDestino;
function leerDestino() {
url = location.search.substr(1).split("=");
Destino = url[1].split(".");
formDestino = Destino[0];
campoDestino = Destino[1];
}
window.onload = leerDestino;
Hay distintas formas de obtener variables desde una página, así que no voy a comentar el script, y quién conozca otra forma que lo haga a su gusto... ahora tan solo voy a añadir la forma de definir la función que llenará los campos que hemos reservado para las fechas:
// "seleccionaFecha" debe ser el cuarto parámetro del calendario.
function seleccionaFecha(dd, mm, aa) {
if (opener) {
opener.document.forms[formDestino][campoDestino].value = dd + "/" + mm + "/" + aa;
window.close();
}
else alert("año: " + aa + "\nmes: " + mm + "\ndia: " + dd);
}
También se puede usar un script que crea integramente el calendario de forma dinámica usando DOM (javascript). Por el momento no funciona en el explorador Internet Explorer, pero en cuanto solucione el problema, lo comunicaré.
En este caso hacen falta otros parámetros: el sitio donde se quiere crear y un valor lógico cierto/falso (true/false) indicando si se debe insertar al principio o al final del sitio especificado (su atributo id)
La forma de insertar este segundo calendario en esta página es la siguiente:
<body onload="_ya = new Date(); calendario( _ya.getMonth(), _ya.getFullYear(), 'calendario', 'otrasFechas', false, 'seleccionandoFecha')" >
Agradezco la ayuda que siempre me han dado desde los foros del web, y en este script un agradecimiento especial a "Cap.Buscapina" que ha participado en el siguiente mensaje: creación dinámica de formularios (explorer) .