DateBox, plugin para ingreso de fechas para jQueryMobile

Seguramente muchas veces hemos utilizado algún plugin de jquery ui como el control DatePicker para seleccionar una fecha, sin embargo este control no es adecuado para desplegarlo en un dispositivo móvil, por lo que debemos buscar otras alternativas, y es justamente en esta búsqueda, que me encontré con este excelente plugin para JQueryMobile, el control DateBox, puedes ver una excelente galería de demos y documentación en:

http://dev.jtsage.com/jQM-DateBox/

En mi caso, requiero el siguiente escenario, la selección de los fechas, la clásica fecha de inicio y fecha fin:

image

Como ya es común en mis post, estoy utilizando WebMatrix, que por su simpleza, limpieza de código y facilidad de uso.

Las librerías a incluir y la configuración del control:

<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css” />

<link rel=”stylesheet” type=”text/css” href=”http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.css” />
<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.6.1.min.js”></script>

<script type=”text/javascript” src=”http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js”></script>

<script type=”text/javascript” src=”http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.js”></script>

<script type=”text/javascript”>

$(function () {

   jQuery.extend(jQuery.mobile.datebox.prototype.options, {

      ‘dateFormat’: ‘dd/MM/YYYY’,

      ‘headerFormat’: ‘dd/MM/YYYY’,

      ‘setDateButtonLabel’: ‘Aceptar’,

      ‘fieldsOrder’: [“d”,“m”, “y”],

      ‘noButtonFocusMode’: ‘true’

        

   }); 

});

Los Script y CSS incluidos en orden son:

  • jquerymobile.min.css
  • jquery.mobile.datebox.min.css
  • jquery-1.6.1.min.js
  • jquery.mobile-1.0b1.min.js
  • jquery.mobile.datebox.min.js

Ya está disponible para la descarga la versión beta 2 de JQueryMobile, en mi caso había realizado el ejemplo con la beta1.
Existe una gran cantidad de características que podemos parametrizar de datebox, en este ejemplo las configuraciones más importante son dateformat, en donde especificamos el formato, el headerFormat, que es el preview de la fecha, setDateButton, que nos permite especificar el texto del botón y fieldsOrder, que nos va a permitir que la selección de el día , mes y año esté en el orden correcto de los botones (pruébalo sin esto y me entenderás)

Luego, los input text con el data-role que los implementará:

<label for=”fechaini”>Fecha Inicio</label>

<input type=”text” name=”fechaini” value=”” id=”fechaini”
 
data-role
=”datebox”>

Al momento de hacer click sobre el input text vamos a ver el siguiente popup:

image

Pero de todas formas podemos configurar este control para que tenga otra apariencia, como por ejemplo, la selección con un desplazamiento vertical o horizontal.imageimage

Puedes ver más detalle de las distintas configuraciones de este plugin en:
http://dev.jtsage.com/jQM-DateBox/

Espero que te sirva en tus desarrollos móviles.
Atte.
Gonzalo

3 comentarios en “DateBox, plugin para ingreso de fechas para jQueryMobile”

  1. Estoy implementando DateBox en mi web. El problema que sigo todos tus pasos y sigue sin funcionarme. He probado cambiando el orden del css y los js, los tengo todos en local, la ruta está correcta, también he probado ha hacerle distintos bind, pero nada, me aparece el típico cuadro de texto blanco con flechita arriba y abajo, y si consigo que pille el aspecto correcto, no me sale el botón para abrir el calendario ni reacciona a ningún evento. ¿Puedes aconsejarme que haga algo en particular?

    Gracias por el manual

  2. Pues con safari y firefox en el ordenador (mac), safari en iphone y el navegador nativo en un tablet y teléfono android.

    Es curioso porque he copiado todo el código de esa página tal cual a otra nueva con otro nombre y funciona O_O. He vaciado ya la caché de todos los navegadores, reiniciado el servidor web (wamp) y el servidor completamente, etc. Pero cuando le viene en gana o deja de cargarlo y me vuelve a aparecer el cuadro en blanco o mejor, si vuelvo a la página donde está el componente deja de aparecerme el calendario en modo calbox y me aparece en modo android. Un poco desesperante la verdad.

    Gracias por el interés

Deja un comentario

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