JqueryUI - Selector de fechas

Option - altField

Esta opción especifica un selector de jQuery para un campo que también se actualiza con las selecciones de fecha. La opción altFormat se puede utilizar para establecer el formato de este valor. Esto es bastante útil para establecer valores de fecha en un elemento de entrada oculto que se enviará al servidor, mientras se muestra un formato más fácil de usar para el usuario. Por defecto su valor es"".

Syntax

$(".selector").datepicker(
   { altField: "#actualDate" }
);

Option - altFormat

Esta opción se utiliza cuando se especifica una opción altField . Proporciona el formato para que el valor se escriba en el elemento alternativo. Por defecto su valor es"".

Syntax

$(".selector").datepicker(
   { altFormat: "yy-mm-dd" }
);

Option - appendText

Esta opción es un valor de cadena que se colocará después del elemento <input>, destinado a mostrar instrucciones al usuario. Por defecto su valor es"".

Syntax

$(".selector").datepicker(
   { appendText: "(yyyy-mm-dd)" }
);

Option - autoSize

Esta opción, cuando se establece en true, cambia el tamaño del elemento <input> para acomodar el formato de fecha del selector de fechas según lo establecido con la opción dateFormat. Por defecto su valor esfalse.

Syntax

$(".selector").datepicker(
   { autoSize: true }
);

Option - beforeShow

Esta opción es una función de devolución de llamada que se invoca justo antes de que se muestre un selector de fecha, con el elemento <input> y la instancia del selector de fecha pasados ​​como parámetros. Esta función puede devolver un hash de opciones utilizado para modificar el selector de fechas. Por defecto su valor es"".

Option - beforeShowDay

Esta opción es una función de devolución de llamada que toma una fecha como parámetro, que se invoca para cada día en el selector de fechas justo antes de que se muestre, con la fecha pasada como el único parámetro. Esto se puede utilizar para anular algunos de los comportamientos predeterminados de los elementos del día. Esta función debe devolver una matriz de tres elementos, como sigue:

• [0]: verdadero para que la fecha se pueda seleccionar, falso en caso contrario.

• [1]: una cadena de nombres de clases CSS delimitada por espacios para aplicar o una cadena vacía para no aplicar ninguna

• [2]: una cadena opcional para aplicar una descripción emergente al elemento del día

Por defecto su valor es null.

Option - buttonImage

Esta opción especifica la ruta a una imagen que se mostrará en el botón habilitado estableciendo la opción showOn en uno de los botones o en ambos. Si también se proporciona buttonText , el texto del botón se convierte en el atributo alt del botón. Por defecto su valor es"".

Syntax

$(".selector").datepicker(
   { buttonImage: "/images/datepicker.gif" }
);

Option - buttonImageOnly

Esta opción, si se establece en true , especifica que la imagen especificada por buttonImage debe aparecer independiente (no en un botón). La opción showOn aún debe establecerse en uno de los botones o en ambos para que aparezca la imagen. Por defecto su valor esfalse.

Syntax

$(".selector").datepicker(
   { buttonImageOnly: true }
);

Option - buttonText

Esta opción especifica el título del botón habilitado estableciendo la opción showOn en uno de los botones o en ambos . Por defecto su valor es"...".

Syntax

$(".selector").datepicker(
   { buttonText: "Choose" }
);

Option - calculateWeek

Esta opción es una función personalizada para calcular y devolver el número de semana para una fecha pasada como el único parámetro. La implementación predeterminada es la proporcionada por la función de utilidad $ .datepicker.iso8601Week () .

Syntax

$(".selector").datepicker(
   { calculateWeek: myWeekCalc }
);

Option - changeMonth

Si esta opción está configurada como verdadera , se muestra un menú desplegable de mes, lo que permite al usuario cambiar directamente el mes sin usar los botones de flecha para recorrerlos. Por defecto su valor esfalse.

Syntax

$(".selector").datepicker(
   { changeMonth: true }
);

Option - changeYear

Si esta opción se establece en verdadera , se muestra un menú desplegable de año, lo que permite al usuario cambiar directamente el año sin usar los botones de flecha para recorrerlos. Opción yearRange se puede utilizar para controlar qué años están disponibles para su selección. Por defecto su valor esfalse.

Syntax

$(".selector").datepicker(
   { changeYear: true }
);

Option - closeText

Esta opción especifica el texto para reemplazar el título predeterminado de Listo para el botón de cierre. Se utiliza cuando el panel de botones se muestra mediante la opción showButtonPanel . Por defecto su valor es"Done".

Syntax

$(".selector").datepicker(
   { closeText: "Close" }
);

Option - constrainInput

Si esta opción se establece como verdadera (el valor predeterminado), la entrada de texto en el elemento <input> está restringida a los caracteres permitidos por la opción de formato de fecha actual . Por defecto su valor estrue.

Syntax

$(".selector").datepicker(
   { constrainInput: false }
);

Option - currentText

Esta opción especifica el texto para reemplazar el título predeterminado de Hoy para el botón actual. Esto se usa si el panel de botones se muestra a través de la opción showButtonPanel . Por defecto su valor esToday.

Syntax

$(".selector").datepicker(
   { currentText: "Now" }
);

Option - dateFormat

Esta opción especifica el formato de fecha que se utilizará. Por defecto su valor esmm/dd/yy.

Syntax

$(".selector").datepicker(
   { dateFormat: "yy-mm-dd" }
);

Option - dayNames

Esta opción es una matriz de 7 elementos que proporciona los nombres de los días completos con el elemento 0 que representa el domingo. Se puede utilizar para localizar el control. Por defecto su valor es[ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ].

Syntax

$(".selector").datepicker(
   { dayNames: [ "Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag" ] }
);

Option - dayNamesMin

Esta opción es una matriz de 7 elementos que proporciona los nombres de días mínimos con el elemento 0 que representa el domingo, utilizado como encabezados de columna. Se puede utilizar para localizar el control. Por defecto su valor es[ "Su", "Mo", "Tu", "We", "Th", "Fr", "Sa" ].

Syntax

$(".selector").datepicker(
   { dayNamesMin: [ "So", "Mo", "Di", "Mi", "Do", "Fr", "Sa" ] }
);

Option - dayNamesShort

Esta opción especifica una matriz de 7 elementos que proporciona los nombres de los días cortos con el elemento 0 que representa el domingo. Se puede utilizar para localizar el control. Por defecto su valor es[ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ].

Syntax

$(".selector").datepicker(
   { dayNamesShort: [ "Son", "Mon", "Die", "Mit", "Don", "Fre", "Sam" ] }
);

Option - defaultDate

Esta opción establece la fecha inicial para el control, anulando el valor predeterminado de hoy, si el elemento <input> no tiene ningún valor. Puede ser una instancia de fecha , el número de días a partir de hoy o una cadena que especifica una fecha absoluta o relativa. Por defecto su valor esnull.

Syntax

$(".selector").datepicker(
   { defaultDate: +7 }
);

Option - duration

Esta opción especifica la velocidad de la animación que hace que aparezca el selector de fechas. Puede ser lento, normal o rápido, o el número de milisegundos para que se extienda la animación. Por defecto su valor esnormal.

Syntax

$(".selector").datepicker(
   { duration: "slow" }
);

Option - firstDay

Esta opción especifica qué día se considera el primer día de la semana y se mostrará como la columna más a la izquierda. Por defecto su valor es0.

Syntax

$(".selector").datepicker(
   { firstDay: 1 }
);

Option - gotoCurrent

Esta opción cuando se establece en verdadera , el enlace del día actual se establece en la fecha seleccionada, anulando el valor predeterminado de hoy. Por defecto su valor esfalse.

Syntax

$(".selector").datepicker(
   { gotoCurrent: true }
);

Option - hideIfNoPrevNext

Esta opción, si se establece en true , oculta los enlaces siguientes y anteriores (en lugar de simplemente deshabilitarlos) cuando no son aplicables, según lo determinado por la configuración de las opciones minDate y maxDate . Por defecto su valor esfalse.

Syntax

$(".selector").datepicker(
   { hideIfNoPrevNext: true }
);

Option - isRTL

Esta opción cuando se establece en verdadero , especifica las localizaciones como un idioma de derecha a izquierda. Por defecto su valor esfalse.

Syntax

$(".selector").datepicker(
   { isRTL: true }
);

Option - maxDate

Esta opción establece la fecha máxima seleccionable para el control. Puede ser una instancia de fecha, el número de días a partir de hoy o una cadena que especifica una fecha absoluta o relativa. Por defecto su valor esnull.

Syntax

$(".selector").datepicker(
   { maxDate: "+1m +1w" }
);

Option - minDate

Esta opción establece la fecha mínima seleccionable para el control. Puede ser una instancia de fecha , el número de días a partir de hoy o una cadena que especifica una fecha absoluta o relativa. Por defecto su valor esnull.

Syntax

$(".selector").datepicker(
   { minDate: new Date(2007, 1 - 1, 1) }
);

Option - monthNames

Esta opción es una matriz de 12 elementos que proporciona los nombres de los meses completos con el elemento 0 que representa enero. Se puede utilizar para localizar el control. Por defecto su valor es[ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ].

Syntax

$(".selector").datepicker(
   { monthNames: [ "janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre" ]  }
);

Option - monthNamesShort

Esta opción especifica una matriz de 12 elementos que proporciona los nombres cortos de los meses con el elemento 0 que representa enero. Se puede utilizar para localizar el control. Por defecto su valor es[ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ].

Syntax

$(".selector").datepicker(
   { monthNamesShort: [ "jan", "fév", "mar", "avr", "mai", "Jui", "Jul", "aoû", "sep", "Oot", "nov", "déc" ] }
);

Option - navigationAsDateFormat

Si esta opción se establece en true , los enlaces de navegación para nextText, prevText y currentText se pasan a través de la función $ .datepicker.formatDate () antes de mostrarse. Esto permite que se proporcionen formatos de fecha para aquellas opciones que se reemplazan con los valores relevantes. Por defecto su valor esfalse.

Syntax

$(".selector").datepicker(
   { navigationAsDateFormat: true }
);

Option - nextText

Esta opción especifica el texto para reemplazar el título predeterminado de Siguiente para el enlace de navegación del mes siguiente. ThemeRoller reemplaza este texto con un icono. Por defecto su valor esNext.

Syntax

$(".selector").datepicker(
   {  nextText: "Later" }
);

Option - numberOfMonths

Esta opción especifica la cantidad de meses que se mostrarán en el selector de fechas. Por defecto su valor es1. Se admiten varios tipos:

• Number - La cantidad de meses que se mostrarán en una sola fila.

• Array - Una matriz que define el número de filas y columnas que se mostrarán.

Syntax

$(".selector").datepicker(
   { numberOfMonths: [ 2, 3 ] }
);

Option - onChangeMonthYear

Esta opción es una devolución de llamada que se invoca cuando el selector de fecha se mueve a un nuevo mes o año, con el año, el mes (basado en 1) y la instancia del selector de fecha seleccionados pasados ​​como parámetros, y el contexto de la función se establece en el elemento de campo de entrada. Por defecto su valor esnull.

Option - onClose

Esta opción es una devolución de llamada que se invoca cada vez que se cierra un selector de fechas, se pasa la fecha seleccionada como texto (la cadena vacía si no hay selección) y la instancia del selector de fechas, y el contexto de la función se establece en el elemento de campo de entrada. Por defecto su valor esnull.

Option - onSelect

Esta opción es una devolución de llamada que se invoca cada vez que se selecciona una fecha, se pasa la fecha seleccionada como texto (la cadena vacía si no hay selección) y la instancia del selector de fecha, y el contexto de la función se establece en el elemento de campo de entrada. Por defecto su valor esnull.

Option - prevText

Esta opción especifica el texto para reemplazar el título predeterminado de Prev para el enlace de navegación del mes anterior. (Tenga en cuenta que ThemeRoller reemplaza este texto con un icono). Por defecto su valor esPrev.

Syntax

$(".selector").datepicker(
   { prevText: "Earlier" }
);

Option - selectOtherMonths

Esta opción, si se establece en verdadera , se pueden seleccionar los días que se muestran antes o después de los meses mostrados. Estos días no se muestran a menos que la opción showOtherMonths sea ​​verdadera. Por defecto su valor esfalse.

Syntax

$(".selector").datepicker(
   { selectOtherMonths: true }
);

Option - shortYearCutoff

Esta opción, si es un número, especifica un valor entre 0 y 99 años antes del cual cualquier valor de año de 2 dígitos se considerará que pertenece al siglo anterior. Si esta opción es una cadena, el valor sufre una conversión numérica y se agrega al año actual. El valor predeterminado es+10 que representa 10 años a partir del año actual.

Syntax

$(".selector").datepicker(
   { shortYearCutoff: 50 }
);

Option - showAnim

Esta opción especifica establece el nombre de la animación que se utilizará para mostrar y ocultar el selector de fechas. Si se especifica, debe ser una de las animaciones show / hide de jQuery UI , fadeIn, slideDown o cualquier otro. Por defecto su valor esshow.

Syntax

$(".selector").datepicker(
   { showAnim: "fold" }
);

Option - showButtonPanel

Si esta opción se establece en verdadera , se muestra un panel de botones en la parte inferior del selector de fecha, que contiene los botones actuales y de cierre. El título de estos botones se puede proporcionar a través de las opciones currentText y closeText . Por defecto su valor esfalse.

Syntax

$(".selector").datepicker(
   { showButtonPanel: true }
);

Option - showCurrentAtPos

Esta opción especifica el índice basado en 0, comenzando en la esquina superior izquierda, de donde se debe colocar el mes que contiene la fecha actual dentro de una pantalla de varios meses. Por defecto su valor es0.

Syntax

$(".selector").datepicker(
   { showCurrentAtPos: 3 }
);

Option - showMonthAfterYear

Esta opción especifica si se establece en verdadero , las posiciones del mes y año se invierten en el encabezado del selector de fechas. Por defecto su valor esfalse.

Syntax

$(".selector").datepicker(
   { showMonthAfterYear: true }
);

Option - showOn

Esta opción especifica cuándo debe aparecer el selector de fechas. Los valores posibles son foco, botón o ambos . Por defecto su valor esfocus.

focus (predeterminado) hace que el selector de fecha se muestre cuando el elemento <input> gana el foco.

botón hace que un botón que se creó después de que el elemento <input> (pero antes de cualquier texto adjunto) que activa el selector de fechas cuando se hace clic.

ambos hacen que se cree el botón de activación y que los eventos de enfoque también activen el selector de fechas.

Syntax

$(".selector").datepicker(
   { showOn: "both" }
);

Option - showOptions

Esta opción proporciona un hash para pasar a la animación cuando se especifica una animación de interfaz de usuario de jQuery para la opción showAnim . Por defecto su valor es{}.

Syntax

$(".selector").datepicker(
   { showOptions: { direction: "up" } }
);

Option - showOtherMonths

Esta opción si se establece en verdadera , se muestran las fechas anteriores o posteriores al primer y último día del mes actual. Estas fechas no se pueden seleccionar a menos que la opción selectOtherMonths también esté establecida en true. Por defecto su valor esfalse.

Syntax

$(".selector").datepicker(
   { showOtherMonths: true }
);

Option - showWeek

Si esta opción se establece en verdadera , el número de la semana se muestra en una columna a la izquierda de la pantalla del mes. La opción calculateWeek se puede utilizar para modificar la forma en que se determina este valor. Por defecto su valor esfalse.

Syntax

$(".selector").datepicker(
   { showWeek: true }
);

Option - stepMonths

Esta opción especifica cuántos meses se moverán cuando se haga clic en uno de los controles de navegación del mes. Por defecto su valor es1.

Syntax

$(".selector").datepicker(
   { stepMonths: 3 }
);

Option - weekHeader

Esta opción especifica el texto que se mostrará para la columna del número de la semana, anulando el valor predeterminado de Wk, cuando showWeek es verdadero. Por defecto su valor esWk.

Syntax

$(".selector").datepicker(
   { weekHeader: "W" }
);

Option - yearRange

Esta opción especifica los límites sobre los años que se muestran en el menú desplegable en el formulario desde: hasta cuando changeYear es verdadero . Los valores pueden ser absolutos o relativos (por ejemplo: 2005: +2, de 2005 a 2 años a partir de ahora). El prefijo c se puede utilizar para hacer que los valores relativos se compensen del año seleccionado en lugar del año actual (ejemplo: c-2: c + 3). Por defecto su valor esc-10:c+10.

Syntax

$(".selector").datepicker(
   { yearRange: "2002:2012" }
);

Option - yearSuffix

Esta opción muestra texto adicional después del año en el encabezado del selector de fechas. Por defecto su valor es"".

Syntax

$(".selector").datepicker(
   { yearSuffix: "CE" }
);

Action - destroy()

Esta acción elimina completamente la funcionalidad de selector de fechas. Esto devolverá el elemento a su estado previo al inicio. Este método no acepta argumentos.

Syntax

$(".selector").datepicker("destroy");

Action - dialog( date [, onSelect ] [, settings ] [, pos ] )

Esta acción muestra el selector de fechas en un cuadro de diálogo de la interfaz de usuario de jQuery. Donde -

• fecha es la fecha inicial.

• onSelect es una función de devolución de llamada cuando se selecciona una fecha. La función recibe el texto de la fecha y la instancia del selector de fecha como parámetros.

• settings es la nueva configuración para el selector de fecha.

• pos es la posición de la parte superior / izquierda del diálogo como [x, y] o un MouseEvent que contiene las coordenadas. Si no se especifica, el cuadro de diálogo se centra en la pantalla.

Syntax

$(".selector").datepicker( "dialog", "10/12/2012" );

Action - getDate()

Esta acción devuelve la fecha correspondiente a la fecha seleccionada. Este método no acepta argumentos.

Syntax

$(".selector").datepicker("getDate");

Action - hide()

Esta acción cierra el selector de fechas abierto anteriormente. Este método no acepta argumentos.

Syntax

$(".selector").datepicker("hide");

Action - isDisabled()

Esta acción comprueba si la función del selector de fechas está desactivada. Este método no acepta argumentos.

Syntax

$(".selector").datepicker("isDisabled");

Action - option( optionName )

Esta acción recupera el valor asociado actualmente con el optionName especificado .

Syntax

$(".selector").datepicker( "option", "disabled");

Action - option()

Esta acción obtiene un objeto que contiene pares clave / valor que representan el hash actual de las opciones del selector de fechas. Este método no acepta argumentos.

Syntax

var options = $( ".selector" ).datepicker( "option" );

Action - option( optionName, value )

Esta acción establece el valor de la opción datepicker asociada con el optionName especificado.

Syntax

$(".selector").datepicker( "option", "disabled", true );

Action - option( options )

Esta acción establece una o más opciones para el selector de fechas.

Syntax

$(".selector").datepicker("option", { disabled: true });

Action - refresh()

Esta acción vuelve a dibujar el selector de fecha, después de haber realizado algunas modificaciones externas. Este método no acepta argumentos.

Syntax

$(".selector").datepicker("refresh");

Action - setDate()

Esta acción establece la fecha especificada como la fecha actual del selector de fechas.

Syntax

$(".selector").datepicker("setDate", "10/12/2012");

Action - show()

Esta acción abre el selector de fechas. Si el selector de fecha se adjunta a una entrada, la entrada debe ser visible para que se muestre el selector de fecha. Este método no acepta argumentos.

Syntax

$(".selector").datepicker("show");

Action - widget()

Esta acción devuelve un objeto jQuery que contiene el selector de fechas.

Syntax

$(".selector").datepicker("widget");