Fechas

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.

Resultado:

Características

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>

Calendario en pop-up

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>
ejemplo
entrada
salida

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);
}

Versión DOM

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')" >

Agradecimiento

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) .


Comentarios

Nombre: empleo en df
Procedencia: mexico
URL: http://empleoendf.com
Fecha de envío: 9 de octubre de 2011, a las 01:11.
Valoración:
comentario:

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


Nombre: Juan Ojeda
Procedencia: Peru
E-Mail: jjuan_4_9@hotmail.com
Fecha de envío: 19 de noviembre de 2010, a las 06:46.
Valoración:
comentario:

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>



Nombre: peralex
Procedencia: puebla
Fecha de envío: 14 de mayo de 2010, a las 01:31.
Valoración:
comentario:

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


Nombre: Darío
Procedencia: Guatemala
E-Mail: leonel.davila@gmail.com
Fecha de envío: 31 de marzo de 2010, a las 02:12.
Valoración:
comentario:

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. emoticón emoticón


Nombre: Pepe Molina
Procedencia: España
URL: http://www.caricatos.net
Fecha de envío: 23 de enero de 2010, a las 10:50.
Valoración:
comentario:

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 emoticón ... a la vez existe una caja "anonimato", para quienes prefieran que su email no sea visible. emoticón
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 emoticón.

Saludos foto


Nombre: Carlos
Procedencia: Irun
E-Mail: cfernandez_46@yahoo.es
Fecha de envío: 22 de enero de 2010, a las 14:42.
comentario:

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:

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
&lt;title&gt;Documento sin t&iacute;tulo&lt;/title&gt;
&lt;script type="text/javascript" &gt;


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);
}


&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;/body&gt;
&lt;/html&gt;


Nombre: eMpHaSiS UnLtD.
Procedencia: MEXICO
E-Mail: emphasis_03_dj@hotmail.com
Fecha de envío: 30 de noviembre de 2009, a las 09:47.
comentario:

si pudieras poner el codigo del pop-up te lo agradeceria XD.


Nombre: eMpHaSiS UnLtD.
Procedencia: MEXICO
E-Mail: emphasis_03_dj@hotmail.com
Fecha de envío: 30 de noviembre de 2009, a las 05:12.
comentario:

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.


Nombre: pedrolp
Procedencia: peru
E-Mail: bdoraclebd@gmail.com
Fecha de envío: 24 de noviembre de 2009, a las 23:07.
comentario:

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)


Nombre: gonzalo
Procedencia: madrid
Fecha de envío: 11 de noviembre de 2009, a las 16:55.
comentario:

El calendario más completo que he encontrado. Ahora queda integrarlo con asp. Mi enhorabuena¡¡¡¡


Nombre: naza
Procedencia: vene
Fecha de envío: 1 de noviembre de 2009, a las 20:25.
comentario:

que bueno gracias


Nombre: carina
Procedencia: paraguay
E-Mail: cari_sv@hotmail.com
Fecha de envío: 21 de octubre de 2009, a las 19:22.
comentario:

olacomopuedoacerpara poder usar este calendario???


Nombre: oscar
Procedencia: kro
E-Mail: oscar.ctz@gmail.com
URL: http://http://www.caricatos.net/fechas/index.php
Fecha de envío: 20 de octubre de 2009, a las 23:13.
comentario:

graxias buen tutorial
funciona perfectamente
1000 graxias
y espero k sigas ayundando a los k comenzamos con esto


Nombre: beltranet
Procedencia: México D.F.
E-Mail: beltranet@gmail.com
URL: http://www.beltranet.com
Fecha de envío: 19 de octubre de 2009, a las 19:08.
comentario:

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


Nombre: zinger
Procedencia: estudiante
E-Mail: monzon.100@hotmail.com
URL: http://caritalopezhi5.com
Fecha de envío: 3 de octubre de 2009, a las 01:12.
comentario:

esta chido me ayudo de masiado jajaja el correo es para las chicas


Nombre: Jeimi
Procedencia: Colombia
E-Mail: jeimidand@hotmail.com
Fecha de envío: 28 de agosto de 2009, a las 22:39.
comentario:

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.


Nombre: Julian
Procedencia: colombia-asalariado =S
E-Mail: julian_ssito@hotmail.com
Fecha de envío: 17 de julio de 2009, a las 22:20.
comentario:

gracias


Nombre: Miguel Vasquez
Procedencia: Peru
E-Mail: sonic273@hotmail.com
Fecha de envío: 21 de junio de 2009, a las 08:12.
comentario:

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


Nombre: Monica
Procedencia: España
URL: http://softwareyrecursos.iespana.es
Fecha de envío: 30 de abril de 2009, a las 21:37.
comentario:

¡Gracias amigo!
Es lo que andaba buscando.


Nombre: Majony
Procedencia: estudiante
E-Mail: juanc.romeroc@gmail.com
Fecha de envío: 7 de febrero de 2009, a las 01:33.
comentario:

Muy bueno y util


Nombre: Roberto
Procedencia: España
E-Mail: ranguita@swamedida.com
URL: http://www.swamedida.com
Fecha de envío: 17 de noviembre de 2008, a las 16:42.
comentario:

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?


Nombre: maria
Procedencia: Avila
E-Mail: mnv_17@hotmail.com
Fecha de envío: 16 de septiembre de 2008, a las 11:14.
comentario:

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.


Nombre: principiante
Procedencia: Santiago de Chile
E-Mail: dinamo68@hotmial.com
Fecha de envío: 4 de septiembre de 2008, a las 23:16.
comentario:

excelente, era lo que necesita y funciona muy bien

Saludos y Gracias.


Nombre: quie
Procedencia: estudiante
E-Mail: kerre_73173@hotmail.com
Fecha de envío: 24 de junio de 2008, a las 20:06.
comentario:

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.


Nombre: Valdemar Ruben
Procedencia: Estado de Mexico
E-Mail: valdemar1983@hotmail.com
Fecha de envío: 24 de abril de 2008, a las 02:28.
comentario:


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


Nombre: jesus ruelas vargas
Procedencia: michoacan, mexico
E-Mail: guaimo86@hotmail.com
Fecha de envío: 12 de febrero de 2008, a las 18:47.
comentario:

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.


Nombre: pablo
Procedencia: argentina
E-Mail: pablo@vissionflash.com.ar
Fecha de envío: 31 de enero de 2008, a las 20:45.
comentario:

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


Nombre: phillippe
Procedencia: chile
E-Mail: hatakekakashi__7@hotmail.com
Fecha de envío: 30 de mayo de 2007, a las 16:41.
comentario:

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.


Nombre: regfgo
Procedencia: estudiante
E-Mail: fredyrecalde@hotmail.com
Fecha de envío: 25 de mayo de 2007, a las 03:35.
comentario:

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


Colabore enviando su comentario

Nombre
Procedencia
Página web
E-mail *
Evaluación evaluarevaluarevaluarevaluarevaluarevaluarevaluarevaluarevaluarevaluar
Código de envío

Rellene este campo con la clave de la imagen: codigo de envío

Nota Importante

El campo E-Mail es obligatorio para activar por correo electrónico el comentario (si no desea que se haga público, marque la casilla "anonimato"). También es obligatorio el código "captcha" (el número que se ve en la imagen adjunta); y por supuesto, debe existir un comentario.

Puede encontrar información sobre este sistema de comentarios en este enlace: Ponga comentarios en su web.

Edición negrita cursiva subrayado   alineación izquierda alineación derecha alineación centrada alineación justificada   Insertar enlace insertar imagen   Emoticones: [:)] [:(] [:x] [BIEN] [MAL] [SI] [NO] [APLAUSOS] [MEJORABLE] [¡A VER!] [¡DÉJAME PENSAR!] [FLIPE] [¡SIN PALABRAS!]
Copyright © 2006-2014 www.caricatos.net
Visitas: 59089