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.

Ver ejemplo en funcionamiento

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (9 votos, promedio: 5,00 de 5)
Loading...Loading...
Escrito por Jose Aguilar - Experto programador Prestashop y Wordpress.

22 comentarios para “Datepicker jQuery para fechas de nacimiento

1 Pings/Trackbacks for "Datepicker jQuery para fechas de nacimiento"
  • URL dice:

    … [Trackback]…

    […] Find More Informations here: jose-aguilar.com/blog/datepicker-jquery-dob/ […]…

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

*

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>