jQuery UI API - Widget de selector de fecha (Datepicker Widget)

Categoría

Uso

Descripción:Seleccione una fecha desde un cuadro emergente o un calendario en línea.

Nuevo en la versión:1.0

jQuery UI Datepicker es un complemento altamente configurable para agregar funcionalidad de selección de fechas a una página. Puede personalizar el formato de fecha y el idioma, restringir el rango de fechas seleccionables, agregar botones y otras opciones de navegación.

De forma predeterminada, el selector de fecha se abre en una pequeña superposición cuando el campo de texto relacionado recibe el foco. Para un calendario en línea, basta con adjuntar el selector de fecha a un div o un span.

Interacción de teclado

Cuando el selector de fecha está abierto, están disponibles los siguientes comandos de teclado:

PAGE UP: Mover al mes anterior.
PAGE DOWN: Mover al mes siguiente.
CTRL+PAGE UP: Mover al año anterior.
CTRL+PAGE DOWN: Mover al año siguiente.
CTRL+HOME: Mover al mes actual. Si el selector de fecha está cerrado, lo abre.
CTRL+LEFT: Mover al día anterior.
CTRL+RIGHT: Mover al día siguiente.
CTRL+UP: Mover a la semana anterior.
CTRL+DOWN: Mover a la semana siguiente.
ENTER: Seleccionar la fecha enfocada.
CTRL+END: Cerrar el selector de fecha y borrar la fecha.
ESCAPE: Cerrar el selector de fecha sin realizar ninguna selección.

Utilidades

$.datepicker.setDefaults( settings )

Cambiar la configuración predeterminada para todos los selectores de fecha.

Useoption()métodos para cambiar la configuración de instancias individuales.

Ejemplo de código:

Configure todos los selectores de fecha para que se abran al recibir el foco o al hacer clic en el icono.

$.datepicker.setDefaults({
  showOn: "both",
  buttonImageOnly: true,
  buttonImage: "calendar.gif",
  buttonText: "Calendar"
});

Configure todos los selectores de fecha para que tengan texto en francés.

$.datepicker.setDefaults( $.datepicker.regional[ "fr" ] );

$.datepicker.formatDate( format, date, settings )

Formatea una fecha como un valor de cadena con el formato especificado.

El formato puede ser cualquier combinación de lo siguiente:

d - Día del mes (sin cero inicial)
dd - Día del mes (dos dígitos)
o - Día del año (sin cero inicial)
oo - Día del año (tres dígitos)
D - Nombre corto del día
DD - Nombre largo del día
m - Mes del año (sin cero inicial)
mm - Mes del año (dos dígitos)
M - Nombre corto del mes
MM - Nombre largo del mes
y - Año (dos dígitos)
yy - Año (cuatro dígitos)
@ - Marca de tiempo Unix (ms desde 01/01/1970)
! - Reloj de Windows (100 ns desde 01/01/0001)
'...' - Texto
'' - Comilla simple
Otros - Texto

También hay$.datepickerformatos de fecha estándar predefinidos:

ATOM - 'yy-mm-dd' (igual que RFC 3339/ISO 8601)
COOKIE - 'D, dd M yy'
ISO_8601 - 'yy-mm-dd'
RFC_822 - 'D, d M y' (según RFC 822)
RFC_850 - 'DD, dd-M-y' (según RFC 850)
RFC_1036 - 'D, d M y' (según RFC 1036)
RFC_1123 - 'D, d M yy' (según RFC 1123)
RFC_2822 - 'D, d M yy' (según RFC 2822)
RSS - 'D, d M y' (igual que RFC 822)
TICKS - '!'
TIMESTAMP - '@'
W3C - 'yy-mm-dd' (igual que ISO 8601)

Ejemplo de código:

Muestra la fecha en formato ISO. Produce "2007-01-26".

$.datepicker.formatDate( "yy-mm-dd", new Date( 2007, 1 - 1, 26 ) );

Muestra la fecha en formato francés extendido. Produce "Samedi, Juillet 14, 2007".

$.datepicker.formatDate( "DD, MM d, yy", new Date( 2007, 7 - 1, 14 ), {
  dayNamesShort: $.datepicker.regional[ "fr" ].dayNamesShort,
  dayNames: $.datepicker.regional[ "fr" ].dayNames,
  monthNamesShort: $.datepicker.regional[ "fr" ].monthNamesShort,
  monthNames: $.datepicker.regional[ "fr" ].monthNames
});

$.datepicker.parseDate( format, value, settings )

Extrae una fecha de un valor de cadena con el formato especificado.

El formato puede ser cualquier combinación de lo siguiente:

d - Día del mes (sin cero inicial)
dd - Día del mes (dos dígitos)
o - Día del año (sin cero inicial)
oo - Día del año (tres dígitos)
D - Nombre corto del día de la semana
DD - Nombre largo del día de la semana
m - Mes del año (sin cero inicial)
mm - Mes del año (dos dígitos)
M - Nombre corto del mes
MM - Nombre largo del mes
y - Año (dos dígitos)
yy - Año (cuatro dígitos)
@ - Marca de tiempo Unix (ms desde 01/01/1970)
! - Reloj de Windows (100 ns desde 01/01/0001)
'...' - Texto
'' - Comilla simple
Otros - Texto

Algunas excepciones que pueden lanzarse:

'Invalid arguments' - Esta excepción se lanza si el formato o el valor está vacío.
'Missing number at position nn' - Esta excepción se lanza si el formato indica un valor numérico que no se encuentra.
'Unknown name at position nn' - Esta excepción se lanza si el formato indica un nombre de día de la semana o de mes que no se encuentra.
'Unexpected literal at position nn' - Esta excepción se lanza si el formato indica un valor de texto que no se encuentra.
'Invalid date' - Esta excepción se lanza si la fecha no es válida, por ejemplo, '31/02/2007'.

Ejemplo de código:

Extraer una fecha en formato ISO.

$.datepicker.parseDate( "yy-mm-dd", "2007-01-26" );

Extraer una fecha en formato francés extendido.

$.datepicker.parseDate( "DD, MM d, yy", "Samedi, Juillet 14, 2007", {
  shortYearCuroff: 20,
  dayNamesShort: $.datepicker.regional[ "fr" ].dayNamesShort,
  dayNames: $.datepicker.regional[ "fr" ].dayNames,
  monthNamesShort: $.datepicker.regional[ "fr" ].monthNamesShort,
  monthNames: $.datepicker.regional[ "fr" ].monthNames
});

$.datepicker.iso8601Week( date )

Determina la semana del año de una fecha dada: de 1 a 53.

Esta función utiliza la definición de semana de la norma ISO 8601: la semana comienza en lunes, y la primera semana de cada año contiene el 4 de enero. Esto significa que hasta tres días del año anterior pueden estar en la primera semana del año actual, y hasta tres días del año actual pueden estar en la última semana del año anterior.

Esta función escalculateWeekla implementación predeterminada de la opción.

Ejemplo de código:

Encuentra la semana del año para una fecha.

$.datepicker.iso8601Week( new Date( 2007, 1 - 1, 26 ) );

$.datepicker.noWeekends

Establezca una función como beforeShowDay para evitar la selección de fines de semana.

PodemosbeforeShowDayproporcionar en la opciónnoWeekends()una función para calcular todos los días laborables, que proporcione untrue/falsearray de valores para indicar si una fecha es seleccionable.

Ejemplo de código:

Configure DatePicker para que los fines de semana no sean seleccionables.

$( "#datepicker" ).datepicker({
  beforeShowDay: $.datepicker.noWeekends
});

Limitaciones

El selector de fecha proporciona soporte para contenido de localización dirigido a diferentes idiomas y formatos de fecha. Cada localización se incluye en un archivo con el código de idioma añadido después del nombre, por ejemplo, el francés esjquery.ui.datepicker-fr.jsEl archivo de localización requerido debe incluirse después del código principal del selector de fecha. Cada archivo de localización agrega su propia configuración al conjunto de localizaciones disponibles, y todas las instancias aplican automáticamente esta configuración como predeterminada.

$.datepicker.regionalLa propiedad almacena un array de localizaciones, con el código de idioma como prefijo; el prefijo predeterminado es"", que representa el inglés. Cada entrada es un objeto con las siguientes propiedades:closeText、prevText、nextText、currentText、monthNames、monthNamesShort、dayNames、dayNamesShort、dayNamesMin、weekHeader、dateFormat、firstDay、isRTL、showMonthAfterYearyyearSuffix。

Puede restaurar la localización predeterminada con el siguiente código:

$.datepicker.setDefaults( $.datepicker.regional[ "" ] );

Puede sobrescribir el selector de fecha para una ubicación específica con el siguiente código:

$( selector ).datepicker( $.datepicker.regional[ "fr" ] );

Tematización

El widget de selector de fecha (Datepicker Widget) utilizael marco CSS de jQuery UIpara definir el estilo de su apariencia y sensación. Si necesita usar estilos específicos del selector de fecha, puede utilizar los siguientes nombres de clase CSS:

ui-datepicker: el contenedor externo del selector de fecha. Si el selector de fecha está en línea, este elemento también tendrá unaui-datepicker-inlineclass. Si se ha configuradoisRTLopción, este elemento tendrá además unui-datepicker-rtl class.
- ui-datepicker-header: Contenedor del encabezado del selector de fecha.
  - ui-datepicker-prev: Control para seleccionar el mes anterior.
  - ui-datepicker-next: Control para seleccionar el mes siguiente.
  - ui-datepicker-title: Contenedor de título del selector de fecha que incluye el mes y el año.
    - ui-datepicker-month: Visualización del texto del mes, si se establece lachangeMonthopción, se muestra el<select>elemento.
    - ui-datepicker-year: Visualización del texto del año, si se establece lachangeYearopción, se muestra el<select>elemento.
- ui-datepicker-calendar: La tabla que contiene el calendario.
  - ui-datepicker-week-end: Celdas de fin de semana. : Cells containing weekend days.
  - ui-datepicker-other-month: Celdas que pertenecen a un mes pero no son días del mes actual.
  - ui-datepicker-unselectable: Celdas que el usuario no puede seleccionar.
  - ui-datepicker-current-day: Celda de la fecha seleccionada.
  - ui-datepicker-today: Celda de la fecha actual.
- ui-datepicker-buttonpane: Cuando se establece lashowButtonPanelopción, se utiliza el panel de botones (buttonpane).
  - ui-datepicker-current: Botón para seleccionar la fecha actual.

SinumberOfMonthsla opción se utiliza para mostrar varios meses, se usan algunas clases adicionales:

ui-datepicker-multi: Contenedor más externo de un selector de fecha de varios meses. Este elemento tendrá además, según el número de meses a mostrar,ui-datepicker-multi-2、ui-datepicker-multi-3oui-datepicker-multi-4nombres de clase.
- ui-datepicker-group: Selector individual dentro del grupo. Este elemento tendrá además, según su posición en el grupo,ui-datepicker-group-first、ui-datepicker-group-middleoui-datepicker-group-lastnombres de clase.

Dependencias

Núcleo de UI (UI Core)
Núcleo de efectos (Effects Core)(Opcional; cuando se usa con lashowAnimopción)

Notas adicionales

Este widget requiere algo de CSS funcional; de lo contrario, no funcionará. Si crea un tema personalizado, use el archivo CSS específico del widget como punto de partida.
Este widget manipula el valor del elemento mediante programación, por lo que cuando el valor del elemento cambia no se activa elchangeevento nativo.
No se admite en<input type="date">la creación de un selector de fecha, ya que provocaría conflictos de interfaz de usuario con el selector nativo.

Ejemplos

Un selector de fecha (Datepicker) simple de jQuery UI.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>日期选择器部件（Datepicker Widget）演示</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
 
<div id="datepicker"></div>
 
<script>
$( "#datepicker" ).datepicker();
</script>
 
</body>
</html>

Otras extensiones

jQuery UI Tema

jQuery UI Biblioteca de componentes

jQuery UI Manual de referencia

jQuery UI Instancia

jQuery UI API - Widget de selector de fecha (Datepicker Widget)

Categoría

Uso

Interacción de teclado

Utilidades

$.datepicker.setDefaults( settings )

$.datepicker.formatDate( format, date, settings )

$.datepicker.parseDate( format, value, settings )

$.datepicker.iso8601Week( date )

$.datepicker.noWeekends

Limitaciones

Tematización

Dependencias

Notas adicionales

Ejemplos