Tutorial JQuery UI | Calendario

Datepicker (calendario)

Si necesitamos que los usuarios introduzcan fechas en una página este widget nos resultará muy útil ya que les permitirá seleccionarlas en un calendario.

Algunas de sus propiedades principales son (consulta el enlace facilitado al final de esta sección para obtener más información):

dayNames / dayNamesShort / dayNamesMin: permite establecer los nombres de los días de la semana (comenzando desde el domingo) en formato largo, corto y abreviado respectivamente.
defaultDate: permite indicar una fecha seleccionada por defecto.
dateFormat: establecer el formato de fecha.
minDate / maxDate: permiten indicar la fecha mínima y máxima que podrán ser seleccionadas.
monthNames: / monthNamesShort:: permite establecer los nombres de los meses en formato largo y corto respectivamente.
onSelect: función a ejecutar cuando se seleccione una fecha.
onClose: función a ejecutar cuando se cierre el calendario (se haya seleccionado o no una fecha).

También disponemos entre otros de los siguientes métodos:

show() / hide(): muestra/oculta el calendario.
destroy(): elimina el calendario.
dialog(): abre el calendario en un cuadro de diálogo.
setDate(): permite seleccionar una fecha en el calendario.
getDate(): obtiene la fecha seleccionada.

Veamos un ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <title>InformaticaPC | Calendario con JQuery UI</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <style type="text/css">
        body { background-color:lightyellow;font-family:Arial;font-size:10pt; }
    </style>

    <!-- Observa que agregamos también la librería JQuery UI -->
    <script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../lib/jquery-ui-1.10.1.custom.min.js"></script>

    <!-- Agregamos también el archivo CSS del theme que usemos -->
    <link type="text/css" rel="stylesheet" href="../lib/css/smoothness/jquery-ui-1.10.1.custom.css" />

    <script type="text/javascript">

        $(document).ready(function()
        {
            $("#desde").datepicker();
            $("#hasta").datepicker( { dayNamesMin: [ "Dom","Lun","Mar","Mie","Jue","Vie","Sáb" ],
                                    monthNames: [ "Enero", "Febrero", "Marzo", "Abril", "Mayo",
                                        "Junio", "Julio", "Agosto", "Septiembre", "Octubre",
                                        "Noviembre", "Diciembre" ],
                                    firstDay: 1,
                                    dateFormat: "dd/mm/yy"
                });
        });

    </script>
  </head>

  <body>

      <label for="desde">Desde:</label>
      <input type="text" id="desde" value="" />

      <label for="desde">Hasta:</label>
      <input type="text" id="hasta" value="" />

  </body>

</html>

Ejemplo

Como puedes observar la creación de un calendario es bien sencilla, basta con aplicar el método datepicker() (definiendo las opciones de configuración deseadas) a un cuadro de texto.

Vea también: [ Datepicker ] - [ Datepicker (ejemplo) ]

Tutorial de JQuery

Datepicker (calendario)