date picker

Download Date Picker

Post on 31-Oct-2015

322 views

Category:

Documents

0 download

Embed Size (px)

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 Datep