Datepicker jQuery

En este artículo vamos a detallar varios ejemplos de como utilizar el datepicker de jQuery Interface User.

Lo primero que tendremos que hacer es ir a la página de jQuery UI donde tendremos dos opciones: descargar uno de los templates ya existentes. Hay muchos y ya te podrían satisfacer o si quieres tu propio template puedes acceder a Themes para crearlo y descargarlo.

Una vez tenemos los archivos descargados serán de vital importancia 4 más la carpeta de imágenes del tema. Estos 4 archivos son los siguientes y debemos incorporarlos en el <head> de nuestra página Web:

<link type="text/css" href="css/ui-darkness/jquery-ui-1.8.23.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.datepicker-es.js"></script>

Los 3 primeros archivos vienen en el paquete de descarga y se corresponden a los estilos del theme, la librería jQuery y la customización de scripts donde tendremos la funcionalidad del datepicker.

El último archivo representa el idioma en el que se va a mostrar el datepicker. En este caso hemos obtenido el español.

Para implementar un datepicker simple deberemos añadir al <head> lo siguiente:

<script type="text/javascript">
$(function() {
    $("#demo1").datepicker();
</script>

Y luego en el <body> añadir el campo o input con id=»demo1″:

<label>Selecciona fecha:</label><input id="demo1" type="text" name="fecha1">

Obteniendo como resultado:

Si queremos ver un ejemplo más complejo, podríamos obtener la fecha seleccionada y guardarla con AJAX de la siguiente forma:

<script type="text/javascript">
$(function() {    
    $('#demo9').datepicker({
        onSelect: function(selectedDate) {
            var dataString = 'date='+selectedDate;
            $.ajax({
                type: "POST",
                url: "save.php",
                data: dataString,
                success: function(data) {
                    $('#result').empty();
                    $('#result').html(data);
                }
            });
        }

    });
});
</script>

Y en el <body>:

<label>Selecciona fecha:</label><input id="demo9" type="text" name="fecha2"><div id="result"></div>

En el ejemplo que mostramos a continuación podremos ver tanto la utilización básica como la utilización con AJAX, pero también podrás observar otras opciones del datepicker como por ejemplo: como darle formato a la fecha seleccionada, como restringir fechas muy útil para cuando no quieras que los usuarios puedan seleccionar una fecha ya pasada o futura, como añadir un selector de año y mes, muy útil para las fechas de nacimiento, como mostrar la semana, como mostrar varios meses, mostrar el datepicker con botón al lado, programar un rango de fechas y mostrar la fecha seleccionada en una alerta.

Ver todos los ejemplos en funcionamiento

Ver más documentación

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(8 votos, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

5 respuestas a “Datepicker jQuery”

  1. Maria dice:

    gracias 🙂

  2. Fabiola dice:

    Disculpa podrías proporcionar la documentación del último ejemplo:
    Guardar fecha mediante AJAX
    Necesito obtener la fecha y convertirla a Date para usarla en listas, en java.
    Por favor!

    • Jose Aguilar dice:

      Hola,

      La llamada ajax la hacemos asi:

      $(‘#demo9’).datepicker({
      onSelect: function(selectedDate) {
      var dataString = ‘date=’+selectedDate;
      $.ajax({
      type: «POST»,
      url: «save.php»,
      data: dataString,
      success: function(data) {
      $(‘#result’).empty();
      $(‘#result’).html(data);
      }
      });
      }

      });

      y luego se debe programar el save.php para que retorne lo que te interese desde el servidor.

  3. Hola, me gustaria ver el codigo del archivo save.php ya que no estoy familiarizado con este tipo de ajax «data: dataString,»

  4. Francisco dice:

    Disculpa y como puedo omitir los domingos o días especificos. este es mi codigo:

    $(function() {
    $(‘#dob’).datepicker({dateFormat: ‘DD d MM yy’, changeMonth: true, changeYear: true, yearRange: ‘-100:+0’});
    });
    $(function () {
    $.datepicker.setDefaults($.datepicker.regional[«es»]);
    $(«#dob»).datepicker({
    firstDay: 1
    });
    });

Deja una respuesta

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre