date picker

Upload: luis-alberto-sanchez-mena

Post on 31-Oct-2015

413 views

Category:

Documents


0 download

TRANSCRIPT

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