Datepicker jQuery para fechas de nacimiento
En el siguiente script mostramos un formulario con un input para obtener la fecha de nacimiento de un usuario utilizando la librería jQuery. La fecha enviada es recibida mediante PHP.
Para poner en marcha este script debemos antes de nada insertar dentro de la etiqueta <head> los estilos y los scripts de la librería jQuery.
<link type="text/css" href="jquery-ui-1.8.6.css" rel="Stylesheet" /> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="jquery-ui-1.8.6.min.js"></script>
Seguidamente, también en dentro de la etiqueta <head> debemos incoorporar lo siguiente:
<script type="text/javascript">
$(function() {
$('#dob').datepicker({dateFormat: 'dd/mm/yy', changeMonth: true, changeYear: true, yearRange: '-100:+0'});
});
</script>
En este trozo de código lo que estamos diciendo es que el input con id=»dob» va a ser tipo datepicker con el formato de fecha especificado a «dd/mm/yy», se puede cambiar el mes y el año en un rango de 100 años.
En el <body> deberíamos poner algo como lo siguiente:
<?php
if (isset($_POST['nuevafecha'])) {
echo 'Fecha de nacimiento recibida: '.$_POST['dob'].'<br>';
//Procesamos la fecha
}
?>
<form action="index.php" method="POST"/>
<div>
Introduce tu fecha de nacimiento:
<input type="text" name="dob" id="dob" />
<input type="submit" name="nuevafecha" value="Enviar"/>
</div>
</form>
En el código anterior tenemos el formulario donde el usuario introduce su fecha de nacimiento. Nos damos cuenta que el campo input tiene como id=»dob» que es lo que utiliza el jQuery para comunicarse. Y luego tenemos el botón de enviar.
Cuando se pulsa el botón de enviar pasa a trabajar el código PHP donde lo único que hacemos es mostrar la fecha enviada.
Autor
¿Buscas trabajo de programador?
28 respuestas a “Datepicker jQuery para fechas de nacimiento”
Deja una respuesta
109 artículos que te podrían interesar
Ver más sobre
Funciona pero no logro hacer que muestre la fecha de nacimiento una vez cargada, en el control. Estoy usando mysql con php
Hola, para mostrar la fecha de nacimiento registrada debes usar el atributo value del campo de texto donde deseas mostrar la fecha con el formato adecuado con el que está configurado el datepicker.
Hola espero alguien me ayude!!! ya tengo ese script y me funciona bien! pero tengo un problema! como le puedo hacer o en que parte del CSS puedo modificarle para mover el calendario osea hacia la derecha o izquierda lo que pasa que me sale por debajo de un formulario que tengo y no puedo visualizar bien el calendario. ojala alguien me pueda ayudar! saludos!
Hola, yo creo que tendrás que darle un vistazo a las opciones que trae el plugin. Quizás alguna te sirva:
https://jqueryui.com/datepicker/
Saludos
como hago para cambiarle el idioma, quiero ponerlo en español si tiene esta función?
Para traducirlo al español debes introducir algo como esto:
jQuery(function($){
$.datepicker.regional[‘es’] = {
closeText: ‘Cerrar’,
prevText: ‘<Ant’,
nextText: ‘Sig>’,
currentText: ‘Hoy’,
monthNames: [‘Enero’,’Febrero’,’Marzo’,’Abril’,’Mayo’,’Junio’,
‘Julio’,’Agosto’,’Septiembre’,’Octubre’,’Noviembre’,’Diciembre’],
monthNamesShort: [‘Ene’,’Feb’,’Mar’,’Abr’,’May’,’Jun’,
‘Jul’,’Ago’,’Sep’,’Oct’,’Nov’,’Dic’],
dayNames: [‘Domingo’,’Lunes’,’Martes’,’Miércoles’,’Jueves’,’Viernes’,’Sábado’],
dayNamesShort: [‘Dom’,’Lun’,’Mar’,’Mié’,’Juv’,’Vie’,’Sáb’],
dayNamesMin: [‘Do’,’Lu’,’Ma’,’Mi’,’Ju’,’Vi’,’Sá’],
weekHeader: ‘Sm’,
dateFormat: ‘dd/mm/yy’,
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: »};
$.datepicker.setDefaults($.datepicker.regional[‘es’]);
});
buen aporte amigo, pero sabes tengo una duda, el datapicker no funciona con la versión 1.11.1 de jquery, siendo que debería de funcionar igualmente,
consulta. Como puedo lograr que mi calendario se vea negro. Creo que el estilo css que me baje es otro. No cuento con las mismas librerias. Alguien podria ayudarme por favor.
Hola,
En el siguiente enlace puedes ver unos themes para los datepickers e incluso puedes crear un theme personalizado al gusto.
http://jqueryui.com/themeroller/
Saludos
Excelente Post amigo muchas gracias
amigo, no me funciona el ejemplo, necesito agregar algo más aparte de esto? hay que agregar librerias? lo estoy colocando en un documento php
si, la librería jquery debe estar en tu servidor si esta usando el código del ejemplo
Excelente ejemplo José, muy claro y directo!
Otra cosita José, me gustaría utlizar la version jquery datepicker que utilizas en este articulo, pero tb me gustaría cambiar colores y tamaños, sabes donde puedo consgeguir el \"builder\" de dicha versión. Por otro lado, conoces otra software de calendarios en español? Gracias de antemano
Hola Jose, gracias por compartir tus conociemintos.
He copiado tu código tal y como está y me funciona en Chrome y Explorer pero no en Firefox, sin embargo tu versión si funciona…. es esto lógico? los archivos son identicos…!
Te paso mi link http://www.hostal-laplata.com/hostal-laplataP/otrocalen/DatepickerDobJquery.htm
Ojalá tenga noticias…
Saludos
Hola Fernando que tal,
me he revisado tu sitio y veo que no estás cargando correctamente los scripts de jquery. abriéndolos veo caracteres extraños
Saludos
Otra cosita José, me gustaría utlizar la version jquery datepicker que utilizas en este articulo, pero tb me gustaría cambiar colores y tamaños, sabes donde puedo consgeguir el «builder» de dicha versión. Por otro lado, conoces otra software de calendarios en español? Gracias de antemano
exelente aporte, me dedico a diseño y priogramacion de formularios y me ayudo mucho.
… [Trackback]…
[…] Find More Informations here: jose-aguilar.com/blog/datepicker-jquery-dob/ […]…
Excelente ayuda 😀 muchas gracias me has salvado
excelente recurso! gracias x compartirlo
Y como puedo obtener las iamgenes???? Se te agradece
I like your writing style truly loving this web site. «Slow and steady wins the race.» by Robert Lloyd.
Muchas gracias, me sirvio de mucho, ahora solo me falta cambiarle el idioma al calendario, porque me aparece en inglés…
Hola Francisco,
Para tenerlo en español deberás bajarte el siguiente archivo e incorporarlo en el head de tu página:
Aqui tienes la explicación de como poner en español el datepicker
http://www.jose-aguilar.com/blog/seleccionar-fecha-con-jquery-y-recibir-con-php/
Excelente,
XVR ME HACIA FALTA