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:
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:
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.
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