Upload
luis-alberto-sanchez-mena
View
414
Download
0
Tags:
Embed Size (px)
Citation preview
Nos adentramos en las opciones avanzadas de jQuery User Interface Datepicker. Por Jaime Pea Tresancos
En nuestro anterior artculo jQuery UI Datepicker. Manual de uso simple comentbamos los
aspectos bsicos de la implementacin y el uso del jQuery User Interface Datepicker, cuya
ltima documentacin completa API de desarrollo- y ejemplos de uso, se pueden obtener en las
direcciones URL:
api.jqueryui.com/1.8/datepicker
jqueryui.com/datepicker
En el presente artculo hablaremos de:
Ocultarlo, deshabilitarlo y reponerlo a sus estados iniciales
Mostrar la semana del ao, la barra de botones y los mens de meses y aos
Fijar la fecha de visin y la fecha por defecto
Mostrarlo como una caja de dilogo
Restringir un rango de fechas seleccionable
Seleccionar rangos de fechas
Ocultarlo y volver a mostrarlo
En ocasiones nos interesar mostrar y ocultar un Datepicker bajo demanda. Para ello
disponemos de los mtodos correspondientes show y hide. La sintaxis de llamada es muy
simple:
$(referencia).datepicker().show()
$(referencia).datepicker().hide()
Veamos el Listado 2, en el programamos un Datepicker asociado a un elemento div y dos
botones de comando que llaman a las funciones show y hide.
Listado 1: Uso de los mtodos de ocultacin y mostrar un Datepicker
jQuery UI Datepicker - Hide & Show
$(function () {
$.datepicker.setDefaults($.datepicker.regional["es"]);
$("#datepicker").datepicker({
firstDay: 1
});
});
$(function () {
$("#off").click(function () {
$("#datepicker").datepicker().hide();
});
});
$(function () {
$("#on").click(function () {
$("#datepicker").datepicker().show();
});
});
Fecha:
Una vez pulsado el botn "hide" el calendario desaparecer.
Para volver a reaparecer al pulsar sobre el botn "show".
Deshabilitarlo y volver a habilitarlo
Otra opcin que puede ser de inters es deshabilitar el Datepicker, de manera que deje de ser
funcional, aunque siga estando presente.
El mtodo a utilizar es "disabled" que, segn su nico parmetro, lo habilita o deshabilitar. La
sintaxis es:
$(referencia).datepicker(option, disabled, true)
$(referencia).datepicker(option, disabled, false)
Veamos el Listado 2, en el programamos un Datepicker asociado a un elemento div y dos
botones de comando que llaman a las funciones de deshabilitacin y habilitacin.
Listado 2: Uso de funciones de habilitar y deshabilitar un Datepicker
jQuery UI Datepicker - Enable & Disable
$(function () {
$.datepicker.setDefaults($.datepicker.regional["es"]);
$("#datepicker").datepicker({
firstDay: 1
});
});
$(function () {
$("#disable").click(function () {
$("#datepicker").datepicker("option", "disabled", true);
});
});
$(function () {
$("#enable").click(function () {
$("#datepicker").datepicker("option", "disabled", false);
});
});
Fecha:
Cuando se pulse el botn "disable" el calendario seguir presente, pero dejar de ser funcional;
no ser posible navegar en l ni seleccionar una fecha.
Mostrar la semana del ao
En ocasiones nos interesar conocer en qu semana del ao nos encontramos y
el Datepicker nos permite tener un acceso directo a dicho valor.
Bastar activar la opcin "showWeek", dndole un valor "true" en la inicializacin, por ejemplo,
con lo que se mostrar, a la izquierda de los das de la semana, el nmero de la semana del mes
que representan.
En el Listado 3 se recoge un ejemplo de ello, hay que indicar a modo informativo que los das de
la semana y las semanas en s se computan conforme al estndar ISO 8601.
Listado 3: Uso de un calendario que muestra el nmero representativo de la semana del ao
jQuery UI Datepicker - Mostrar la semana del ao ISO 8601
$(function () {
$.datepicker.setDefaults($.datepicker.regional["es"]);
$("#datepicker").datepicker({
showWeek: true,
firstDay: 1
});
});
Fecha:
Mostrar la barra de botones
Aunque muy discreta, Datepicker dispone de una botonera para posicionarnos en la fecha actual
y para cerrarse, sin ms; como vemos dos funciones bastante tiles que seguramente nos
interesar activar.
Para ello bastar incluir la opcin "showButtonPanel" e igualarla a "true", por ejemplo durante la
inicializacin, como se muestra en el Listado 4.
Recurdese que para cerrarlo bastara con hacer clic sobre cualquier rea fuera del Datepicker,
pero para ir a la fecha actual deberamos navegar manualmente por el calendario y es por ello
por lo que realmente tiene valor la botonera.
Listado 4: Activacin de la botonera predefinida del Datepicker
jQuery UI Datepicker - Mostrar la barra de botones
$(function () {
$.datepicker.setDefaults($.datepicker.regional["es"]);
$("#datepicker").datepicker({
showButtonPanel: true
});
});
Fecha:
Fijar una fecha de visin
Por defecto, el Datepicker se muestra inicialmente centrado en la fecha actual, pero puede
interesarnos proponer fechas iniciales diferentes.
Disponemos del mtodo "setDate" y de la opcin "defaultDate" que, respectivamente, nos
permitirn fijar fechas diferentes o desplazamientos relativos, expresados en das, meses y
aos, respecto de la fecha actual, tanto hacia el futuro como hacia el pasado y fijar la fecha que
se mostrar por defecto al iniciar el Datepicker.
Respecto a "setDate" su funcin es fijar la fecha a mostrar en el Datepicker, de manera que se
muestre como la predeterminada. Su uso se ilustra en el Listado 5, en el cual se ha asociado a
un botn de comando que, al ser pulsado, nos desplazar la fecha del Datepicker tres meses
ms all de la fecha actual.
Como mencionbamos, se puede pasar una fecha fija o un desplazamiento respecto a la fecha
actual, expresada en das, meses y/o aos, tanto retrospectivamente como hacia el futuro. La
sintaxis es muy sencilla:
Una fecha fija en el formato dd/mm/aaaa. Por ejemplo: 30/08/2014
Un desplazamiento relativo en el que se muestra un nmero seguido de y para aos, de
m para meses y d para das; si se antepone el signo + sern fechas futuras y si se
antepone el signo sern fechas en el pasado. Por ejemplo: +3y
Pueden acumularse desplazamientos relativos, separados por comas. Por ejemplo: +3m,
-20d
Listado 5: Uso de la funcin setDate para desplazar la fecha de presentacin del Datepicker
jQuery UI Datepicker - setDate
$(function () {
$.datepicker.setDefaults($.datepicker.regional["es"]);
$("#datepicker").datepicker({
firstDay: 1
});
});
$(function () {
$("#setDate").click(function () {
$("#datepicker").datepicker("setDate", "+3m");
});
});
Fecha:
Al pulsar el botn setDate, el calendario actualizar la fecha que muestra a la fijada en la
funcin, en nuestro caso tres meses ms tarde que la fecha actual.
Por otra parte, la opcin "defaultDate" fijar la fecha por defecto que ser mostrada por
el Datepicker como predeterminada al abrirse.
Como antes, se puede pasar una fecha fija o un desplazamiento respecto a la fecha actual,
expresada en das, meses y/o aos, tanto retrospectivamente como hacia el futuro.
En el Listado 6 se muestra un ejemplo de uso, en el que el Datepicker se iniciar con una fecha
que es dos meses posterior a la fecha actual.
Listado 6: Uso de la opcin defaultDate para fijar la fecha por defecto de un Datepicker
jQuery UI Datepicker - defaultDate
$(function () {
$.datepicker.setDefaults($.datepicker.regional["es"]);
$("#datepicker").datepicker({
firstDay: 1,
defaultDate: "+2m"
});
});
Fecha:
Mostrar el Datepicker como una caja de dilogo
Los Datepicker aparecen asociados a elementos en los documentos HTML y, como tales, se
muestran pegados a tales elementos, como las entradas de texto que estamos empleando. Pero
cabe la posibilidad de mostrarlos como cajas de dilogo independientes, flotantes en sobre el
documento. Cierto es que con limitaciones, ya que no se puede fijar o modificar su posicin.
Si por ejemplo, queremos una entrada de textos para insertar fechas y a la vez tener la
posibilidad de seleccionarlas mediante un Datepicker que se muestre mediante la pulsacin de
un botn, los pasos a seguir en su programacin seran:
En la parte del documento HTML creamos dos elementos:
o Una entrada de textos, que alojar la fecha seleccionada en el Datepicker
o Un botn de comando que har visible el Datepicker como un dilogo
La funcin de creacin del dilogo que contendr el Datepicker debe ser similar a:
$(function () {
$("#dialog").click(function () {
$("#datepicker").datepicker("dialog", "", updateDate);
function updateDate(date) {
$("#datepicker").val(date);
}
});
});
El mtodo "dialog" llama a la funcin de respuesta personal, en nuestro
caso "updateDate"
En esa funcin devuelve como parmetro un objeto tipo date
Se utiliza la funcin "val" para convertir el objeto date en una cadena de caracteres de
formato fecha que se pasa al Datepicker
Listado 7: Uso de un Datepicker que se mostrar a demanda mediante como caja de dilogo
jQuery UI Datepicker - dialog
$(function () {
$("#dialog").click(function () {
$("#datepicker").datepicker("dialog", "", updateDate);
function updateDate(date) {
$("#datepicker").val(date);
}
});
});
Fecha:
Mostrar mens de meses y aos y la opcin yearRange
Para una mejor navegacin por el Datepicker, ste tiene la posibilidad de darnos accesos rpidos
a los diferentes meses y aos, utilizando las opciones "changeMonth" y "changeYear".
Aparecern en la parte superior del Datepicker un par de listas desplegables con las entradas de
seleccin de los meses del ao y los aos, como se observa en la figura adjunta.
En el Listado 8 se muestra un ejemplo de codificacin de dichas opciones en la inicializacin
del Datepicker. Bastar poner sus valores a "true".
Listado 8: Opcin de Datepicker para mostrar los mens de meses y aos
jQuery UI Datepicker - Mostrar mens de meses y aos
$(function () {
$.datepicker.setDefaults($.datepicker.regional["es"]);
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true
});
});
Fecha:
Un problema con el cdigo anterior es que slo se nos mostrar un rango predeterminado de
aos, que puede no abarcar o exceder- el que nos interese. Por ello, normalmente nos
convendr utilizar a la vez la opcin"yearRange" que permite fijar rangos de aos a ser
seleccionables.
As, en el Listado 9 hemos fijado un rango histrico que vaya de 1900 a 2013.
Listado 9: Opcin de Datepicker para mostrar los mens de meses y aos, con acotacin del
rango de aos mediante la opcin "yearRange"
$(function () {
$.datepicker.setDefaults($.datepicker.regional["es"]);
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
yearRange: "1900:2013"
});
});
Restringir el rango de fechas seleccionable
Imaginemos que deseamos acotar las fechas de seleccin de reservas a un evento, podremos
programar elDatepicker de tal forma que slo permita un rango a nuestro criterio mediante las
opciones minDate y maxDate.
Cmo hemos discutido anteriormente, los valores pasados pueden ser fechas fijas o
desplazamientos relativos en das, meses y/o aos, tanto retrospectivamente como hacia el
futuro. Por ejemplo si fijamos una venta anticipada para una fecha fija puede interesar fijar
fechas fijas de minDate y maxDate; si lo hacemos para venta de entradas al cine para un da
cualquiera, puede interesarnos fijar una fecha relativa de minDate igual a -7d, una semana
antes, y maxDate -1d, el da anterior.
En el Listado 10 se muestra cmo fijar un rango de fechas relativas a la actual, con un
desplazamiento de 20 das hacia atrs y de 2 meses menos diez das hacia adelante.
En el Listado 11 se muestra un ejemplo de fijacin de rango de fechas fijas, durante la
inicializacin del Datepicker.
Listado 10: Ejemplo de fijacin de rango de fechas seleccionable en un Datepicker
jQuery UI Datepicker - Restringir el rango de fechas
$(function () {
$.datepicker.setDefaults($.datepicker.regional["es"]);
$("#datepicker").datepicker({
minDate: "-20D",
maxDate: "+2M, -10D"
});
});
Fecha:
Listado 11: Ejemplo de fijacin de rango de fechas fijas
$(function () {
$.datepicker.setDefaults($.datepicker.regional["es"]);
$("#datepicker").datepicker({
minDate: "15/04/2013",
maxDate: "15/05/2013"
});
});
Seleccionar un rango de fechas
Otra aplicacin muy usual de un calendario es la seleccin de rangos de fechas, por ejemplo
para un viaje.
Para ello utilizaremos dos entradas de textos con dos Datepicker enlazados, de manera que
la "minDate" del segundo sea la fecha seleccionada en el primero de haberla- y la maxDate del
primero la seleccionada en el segundo de haberla-.
Todas esas asignaciones se codifican en las respectivas funciones onClose de los Datepicker, tal
como se recogen en el Listado 12.
Listado 12: Modo de seleccionar un rango de fechas mediante dos Datepicker asociados
jQuery UI Datepicker - Seleccionar un rango de fechas
$(function () {
$("#from").datepicker({
onClose: function (selectedDate) {
$("#to").datepicker("option", "minDate", selectedDate);
}
});
$("#to").datepicker({
onClose: function (selectedDate) {
$("#from").datepicker("option", "maxDate", selectedDate);
}
});
});
Desde:
Hasta: