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) .
Estoy utilizando uno que me encontre en una web que no recuerdo el nombre, pero este solamente me muestra el calendario en un campo , al poner mas campos no me los habilita, alguien sabe porque sucede esto? Al parecer este que muestras en tu articulo si lo permite para mas campo. Lo voy a utilizar. Gracias
Saludos
Me parecio muy bueno el programa de verdad esta bien detallado y entendible, solo tengo un error cuando presiono la fecha que quiero en el calendario no me carga la fecha en la caja de texto no se si me podrias ayudar para saber que me falta o que estoy haciendo mal, te lo agradeceria muchisimo por favor. Te mando mi codigo.
<%@page contentType=\\\"text/html\\\" pageEncoding=\\\"UTF-8\\\"%>
<!DOCTYPE HTML PUBLIC \\\"-//W3C//DTD HTML 4.01 Transitional//EN\\\"
\\\"http://www.w3.org/TR/html4/loose.dtd\\\">
<html>
<head>
<meta http-equiv=\\\"Content-Type\\\" content=\\\"text/html; charset=UTF-8\\\">
<title>JSP Page</title>
<style type=\\\"text/css\\\">
@import \\\"css/main.css\\\";
@import \\\"css/form.css\\\";
@import \\\"css/links.css\\\";
@import \\\"css/tablas.css\\\";
@import \\\"css/calendario.css\\\";
</style>
<script type=\\\"text/javascript\\\" src=\\\"js/calendario.js\\\"></script>
<script type=\\\"text/javascript\\\">
function seleccionandoFecha(dd, mm, aa) {
alert(\\\"año: \\\" + aa + \\\"\\\\nmes: \\\" + mm + \\\"\\\\ndia: \\\" + dd);
return false;
}
var campoDestino;
var formDestino;
function leerDestino() {
url = location.search.substr(1).split(\\\"=\\\");
Destino = url[1].split(\\\".\\\");
formDestino = Destino[0];
campoDestino = Destino[1];
}
function seleccionaFecha(dd, mm, aa) {
var fecha = new Date();
fecha.setDate(dd);
fecha.setMonth(mm - 1);
fecha.setFullYear(aa);
var Semana = [\\\"Domingo\\\",\\\"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;
}
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);
}
window.onload = leerDestino;
</script>
</head>
<body onload=\\\"_ya = new Date();
calendario( _ya.getMonth(),
_ya.getFullYear(),
\\\'calendario\\\',
\\\'otrasFechas\\\',
false,
\\\'seleccionaFecha\\\')\\\" >
<div id=\\\"main\\\">
<div id=\\\"mainsup\\\">
<%@include file=\\\"WEB-INF/jspf/mainsup.jspf\\\" %>
</div>
<div id=\\\"maincen\\\">
<div id=\\\"mainizq\\\">
<div id=\\\"mainmenu\\\">
<%@include file=\\\"WEB-INF/jspf/mainmenu.jspf\\\" %>
</div>
<div id=\\\"mainlogin\\\">
<%@include file=\\\"WEB-INF/jspf/mainlogin.jspf\\\" %>
</div>
</div>
<div id=\\\"maindata\\\">
<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\\\" id=\\\"Entrada\\\">
<button type=\\\"button\\\" onclick=\\\"window.open(\\\'http://www.caricatos.net/fechas/popup.html?destino=ej.Entrada\\\', \\\'_blank\\\', \\\'width=264,height=167\\\')\\\">
rellenar fecha1
</button>
</fieldset>
<fieldset ><legend>fecha 2</legend>
<input type=\\\"text\\\" name=\\\"Salida\\\" id=\\\"Salida\\\" >
<button type=\\\"button\\\" onclick=\\\"window.open(\\\'http://www.caricatos.net/fechas/popup.html?destino=ej.Salida\\\', \\\'_blank\\\', \\\'width=264,height=167\\\')\\\">
rellenar fecha2
</button>
</fieldset>
</fieldset>
</form>
</div>
</div>
<div id=\\\"maininf\\\">
<%@include file=\\\"WEB-INF/jspf/maininf.jspf\\\" %>
</div>
</div>
</body>
</html>
hola que tal muchisimas gracias por el aporte, yo soy principiante pero en cuanto aprenda bien ps tambien voy a aportar algo asi como uds gracias nuevamente por su aporte saludos
nitidisimo!!!! ya me funciono el popup!! lo que no lo han logrado hacer aun, provoquen el popup en esta pagina, luego vayan al popup y con click derecho "ver codigo" este lo pegan en un documento .html, copian el calendario.css, calendario.js en la misma carpeta y listo.
Gracias por el aporte.
Hola:
Estamos actualizando el sistema de comentarios del dominio, y para poderlos realizar, ahora es obligatorio indicar una dirección de correo electrónico válida, para poder luego validar el comentario. Este sistema espero que sirva para evitar el envío de spam ... a la vez existe una caja "anonimato", para quienes prefieran que su email no sea visible.
Con respecto a los últimos comentarios, el código del popup puede obtenerse desde el mismo popup (ver código fuente)... o pinchando aquí
Para más ayuda consultar en los foros del web .
Saludos
Me podría enviar el código del popup. Me genera el popup pero vacío. Su documento es perfecto. Muchas gracias.
El código que yo tengo es:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
<script type="text/javascript" >
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;
// "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);
}
</script>
</head>
<body>
</body>
</html>
si pudieras poner el codigo del pop-up te lo agradeceria XD.
Oye no puedo incluir en el pop-up el calendario... asi k tuve que copiar todo el codigo fuente de tu pagina y logre que apareciera en el pop-up... el unico detalle es que no consigo incluir el estilo del calendario... me podrias ayudar con eso? por lo demas muchas gracias por compartir el codigo, saludos.
Hey amigo, interesante tu aporte, pero ahora, como sabras hay gente q no conocemos tanto sobre los scripts, tu has aportado el archivo en js y en css, pero ahora como hago para q funcionen? bueno me sale el calendario, pero sin estilo, no se como colocarlo no podrias dar tambien ese aporte? creo q seria muchisimo mejor para la gente que conocemos poco, ah y ademas tambien intente colocarlo en popup, pero resulta q al elegir la fecha no pasa nada, no rellena el campo, no podrias colocar estos pasos que para muchos de nosotros no son obvios... Gracias, y sigue aportando asi (Y)
El calendario más completo que he encontrado. Ahora queda integrarlo con asp. Mi enhorabuena¡¡¡¡
que bueno gracias
olacomopuedoacerpara poder usar este calendario???
graxias buen tutorial
funciona perfectamente
1000 graxias
y espero k sigas ayundando a los k comenzamos con esto
Estoy implementando el código popup en mi página, pero al momento de dar clic en Llenar entrada se abre el popup pero me dice que no encontró el objeto, por favor indícame que me falta hacer.
GRACIAS
esta chido me ayudo de masiado jajaja el correo es para las chicas
Pues la verdad es que esta muy chevere tu calendario,pero no has intentado abrir en vez deu na ventana emerjente un lightbox, seria mas estetico y no pesaria tanto.
gracias
Muchas gracias brother tu ejemplo estuvo genial pero en la primera parte tiene un error en el dia 31 no escribe el bien el nombre del dia 31 sino dos dias menos creo, igual habria q revisar el codigo
¡Gracias amigo!
Es lo que andaba buscando.
Muy bueno y util
Muchas gracias por tu aporte, el calendario era justo lo que andaba buscando, pero no he conseguido que funcione correctamente ya que cuando pulso la fecha de salida se borra la de entrada y vicebersa, podrias echarme una mano?
Hola,el calendario funciona a la perfección, pero tengo un problema, he puesto uno para la fecha de inicio y otro para la fecha de fin, el problema es que cuando introduzco por ejemplo la fecha inicio 1/9/2008 y fecha fin 10/9/2008 me dice que la fecha de inicio debe ser menor que la fecha fin, porque hago una comprobación de fechas pero esa comprobación de fechas está correcta, solo me da problemas cuando el dgito primero de fecha inicio solo es una cifra, espero que me puedan ayudar para ver que necesito cambiar.
excelente, era lo que necesita y funciona muy bien
Saludos y Gracias.
YA TENGO EL CODIGO DEL CALENDARIO EN POP-UP PERO AL MOMENTO DE DAR CLICK EN LLENAR ENTRADA NO APARECE EL CALENDARIO COMO LE HAGO PARA QUE HAGA LO MISMO QUE HACE EN LA PAGINA PERO EN MI PC, PASAME EL CODIGO NO! POR FAVOR,Y NO PUEDO CON OTRO CALENDARIOS. ME GUSTARIA QUE ME DIGERAS PASO POR PASO ES QUE SOY NUEVO EN ESTO, QUE CODIGO PONER O QUE HACER , !!!!!!! POR FAVOR, URGENTE.
Hola un favor no tendran codigo para poner la fecha y la hora separados en input (cajas de texto) de un formulario de manera automatica para q al momento de dar guardar se guarde junto con la demas informacion q se tecleo lo quiero de manera automatica para ahorrar tiempo al momento de capturar. tambien el codigo de un calendario desplegable pero el formato de la fecha sea ano mes y dia si saben donde podria conseguirlo se los agradeseria mucho
YA TENGO EL CODIGO DEL CALENDARIO EN POP-UP PERO AL MOMENTO DE DAR CLICK EN LLENAR ENTRADA NO APARECE EL CALENDARIO COMO LE HAGO PARA QUE HAGA LO MISMO QUE HACE EN LA PAGINA PERO EN MI PC, PASAME EL CODIGO NO! PRO FAVOR ES QUE LE ESTOY BA5TALLANDO Y NO PUEDO CON OTRO CALENDARIOS. ME GUSTARIA QUE ME DIGERAS PASO POR PASO ES QUE SOY NUEVO EN ESTO, QUE CODIGO PONER O QUE HACER , !!!!!!! POR FAVOR, URGENTE.
PERFECTO! buenissimo, ahora mi pregunta es: como puedo hacer para enviar estos campos, junto a los datos de contacto por medio un enviar.php? agradecere respuesta, salu2
muy bueno el calendario justo estaba buscando uno en que me permitiera ingresar el año libremente ya que otros que he visto tienes que clickear año por año lo cual resulta un poco lento, excelente trabajo. PD: al del post anterior si es que todavia tiene problemas que me envie un mail para ayudarlo.
Es muy interesante ver en funcionmiento el calendario, justo lo que buscaba, mas aun tengo problemas en implementarlo en mi pagina , estoy haciendo mis pinonos en php ,y no me funciona el calendario, me podrias ayudar para saber como hacer que funsione