Introducción

Uno de los problemas cuando empiezas a hacer formularios para paginas web en los que necesitas que se ingresen fechas es que no hay un objeto de formulario con un calendario, en HTML5 ya se ha introducido pero no funciona con IE.

La solución que yo utilizo es JQuery + JQuery UI, ya que uno de los Widgets que integra es el Datepicker (http://jqueryui.com/datepicker/).

Ya que con unas pocas lineas de HTML y Javascript tenemos un calendario personalizable y amigable.

<html>
<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  <script>
    $(function() {
      $( "#datepicker" ).datepicker();
    });
  </script>
</head>
<body>
....
<p> Fecha: <input type="text" id="datepicker"> </p>
...
</body>

 

 

Ejemplo Practico

Como usar el Datepicker de JQuery UI en HTML y traducirlo a Español.

Código de HTML del archivo dtPicker.html
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script> <!-- Agregamos la libreria de Javascript de JQuery -->
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> <!-- Agregamos la libreria de Javascript de JQuery UI -->
  <script>
	$(function() {
		//Agregamos el "Idioma" Español con las traducciones que deseemos y el formato que queramos que tenga la fecha.
		$.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&aacute;bado'],
			dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mi&eacute;', 'Juv', 'Vie', 'S&aacute;b'],
			dayNamesMin: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'S&aacute;'],
			weekHeader: 'Sm',
			dateFormat: 'dd/mm/yy',
			firstDay: 1,
			isRTL: false,
			showMonthAfterYear: false,
			yearSuffix: ''
		};
		//Indicamos que por defecto coja el idioma es(Español)
		$.datepicker.setDefaults($.datepicker.regional['es']);
	});

	$(function() {
		//Declaramos que todos los IDs que se llamen datepicker(id="datepicker") se conviertan en el Objeto Datepicker
		// y le indicamos que se aparezca una lista con los meses y otra con los años.
		$("#datepicker").datepicker({
			changeMonth: true,
			changeYear: true,
			numberOfMonths: 1
		});
	});
  </script>
</head>
<body>
	<p>Fecha: <input type="text" id="datepicker"></p>
</body>
</html>

 

Resultado