Datepicker JQuery UI

Una de las maneras mas comodas a la hora de insertar una fecha en cualquier aplicación, son esos calendarios que te permiten navegar entre meses y años.

jQuery UI (user interface) proporciona un conjunto de plugin's o widget que permiten la interacción y animación con efectos avanzados y diferentes temas, que se pueden utilizar para construir aplicaciones Web altamente interactivas.

DatePicker de JQuery UI, te permitirá seleccionar una fecha sin que sea necesario escribirla, te permite bloquear el campo para que los datos solo  ingresen por selección, se puedes personalizar el formato y el lenguaje, restringir los rangos, etc.

Datepicker maneja diferentes eventos (createType, beforeShow, onChange, onClose, onClose), así como, diferentes métodos y temas.

Por defecto, el calendario se abre cuando el campo obtiene el focus (evento onFocus) y se cierra automáticamente (evento onBlur) o cuando se selecciona una fecha.

Uso:
1.- una vez descargado el plugin, pasamos a agregarlo a nuestro proyecto:

entre etiquetas head.

<!-- incluimos el jQuery y los archivos de la UI -->
<script type="text/javascript" src="jquery.js"></script>
<link type="text/css" href="js/jquery_ui/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery_ui/jquery-ui.min.js"></script>
<!-- configuramos -->
<script type="text/javascript">
$(document).ready(function () {

   $(".datepicker").datepicker({
     
     dateFormat: "d/m/yy", // formato de la fecha
     //minDate: "+0D", // mínimo tiempo a mostrar
     maxDate: "+1Y", // máximo tiempo a mostrar
     changeMonth: true, // indica si se muestra o no el SELECT de meses

     // iniciales para los días de la semana
     dayNamesMin: ["Do","Lu","Ma","Mi","Ju","Vi","Sa"],

     // nombre completo de los meses
     monthNames: ["Enero","Febrero","Marzo","Abril","Mayo",
                  "Junio","Julio","Agosto","Septiembre",
                  "Octubre","Noviembre","Diciembre"],

     // nombre para cargar el SELECT de búsqueda por mes
     monthNamesShort: ["Enero","Febrero","Marzo","Abril","Mayo","Junio",
                     "Julio", "Agosto","Sep","Octubre",
                         "Nov","Dic"]
     });
});
</script> 

2.- para cada input text que vaya a recibir una fecha dada, indicamos si deseamos que se despliegue el calendario:

Fecha: <input type="text" class="datepicker">

en esta caso estamos usando el selector de clase datepicker, que bien podría ser otro, recordar que si cambiamos el nombre de la clase en los input, también debemos hacerlo en la configuración del plugin.

Fecha: descarga