Web Components Descripción general de la entrada de fecha y hora
La entrada de fecha y hora Ignite UI for Web Components permite al usuario establecer y editar la fecha y la hora en un elemento de entrada elegido. El usuario puede editar las partes de fecha y hora mediante una entrada enmascarada editable. Además, se puede especificar el formato de visualización y entrada deseado, así como los valores mínimos y máximos para utilizar la validación.
Usage
En primer lugar, debe instalar el Ignite UI for Web Components ejecutando el siguiente comando:
npm install igniteui-webcomponents
Luego tendrás que importar elIgcDateTimeInputComponent CSS necesario y registrar su módulo, así:
import { defineComponents, IgcDateTimeInput } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
defineComponents(IgcDateTimeInput);
Para una introducción completa al Ignite UI for Web Components, lee el tema Empezar.
Value binding
La forma más sencilla de establecer el valor delIgcDateTimeInputComponent componente es pasando un objeto Date a lavalue propiedad:
const input = document.querySelector('igc-date-time-input') as IgcDateTimeInputComponent;
const date = new Date();
input.value = date;
TambiénIgcDateTimeInputComponent acepta cuerdas ISO 8601.
La cadena puede ser una cadena completaISO, en el formatoYYYY-MM-DDTHH:mm:ss.sssZ correspondiente, o puede dividirse en partes solo por fecha y solo por hora.
Solo cita
Si una cadena solo de fecha está vinculada a lavalue propiedad del componente, debe estar en el formatoYYYY-MM-DD. TodavíainputFormat se utiliza al escribir valores en la entrada y no tiene que estar en el mismo formato. Además, al vincular una cadena solo de fecha, la directiva evitará los desplazamientos temporales forzando la hora a serT00:00:00.
Tiempo solo
Las cadenas de solo tiempo normalmente no están definidas en laECMA especificación, sin embargo, para permitir la integración de la directiva en escenarios que requieren soluciones de solo tiempo, soporta el formato de 24 horas -HH:mm:ss. El formato de 12 horas no está soportado.
Cadena ISO completa
Si una cadena completaISO está encuadernada, la directiva solo la analizará si se proporcionan todos los elementos requeridos por Date.parse.
Todos los valores falsos, incluyendoInvalidDate serán analizados comonull. Se analizaránISO cadenas incompletas solo por fecha, solo tiempo o completasInvalidDate.
Keyboard Navigation
TieneIgcDateTimeInputComponent una navegación intuitiva con el teclado que facilita incrementar, disminuir o saltar entre diferentesDateParts sin tener que tocar el ratón.
| Llaves | Descripción |
|---|---|
| ← | Mover un personaje al principio |
| → | Mover un personaje hasta el final. |
| HOGAR | Ir al principio |
| FIN | Mover hasta el final |
| CTRL / CMD + ← | Ir al principio de la sección de fecha/hora: la actual o la izquierda |
| CTRL / CMD + → | Ir al final de la sección de fecha/hora: actual en o a la derecha |
| Centrarse en una parte de fecha/hora + ↓ | Disminuye una parte de fecha/hora |
| Centrarse en una parte de fecha/hora + ↑ | Incrementa una parte de fecha/hora |
| CTRL / CMD +; | Establece la fecha/hora actual como valor del editor |
Setting formats
SoportaIgcDateTimeInputComponent diferentes formatos de pantalla y entrada.
Utiliza Intl.DateTimeFormat, que le permite soportar opciones de formato predefinidas, comolong andshort,medium andfull. Además, también puede aceptar una cadena personalizada construida a partir de caracteres soportados, comodd-MM-yy por ejemplo. Además, si nodisplayFormat se proporciona nada, el componente usará elinputFormat tal.
Input Format
La tabla que sigue muestra los formatos soportados por losinputFormat componentes:
| Formato | Descripción |
|---|---|
d |
La fecha será forzada con un cero a la izquierda durante la edición. |
dd |
Fecha con un cero inicial establecido explícitamente. |
M |
Mes, será forzado con un cero a la izquierda durante la edición. |
MM |
Mes con un cero inicial establecido explícitamente. |
yy |
Formato de año corto. |
yyyy |
Formato de año completo. |
h |
Las horas en formato de 12 horas se forzarán con un cero a la izquierda durante la edición. |
hh |
Horas en formato de 12 horas con un cero inicial establecido explícitamente. |
H |
Las horas en formato de 24 horas se verán forzadas con un cero a la izquierda durante la edición. |
HH |
Horas en formato de 24 horas, con un cero inicial establecido explícitamente. |
m |
Las actas, serán coaccionadas con un cero a la izquierda durante la edición. |
mm |
Minutos con un cero inicial establecido explícitamente. |
tt |
Sección AM/PM para formato de 12 horas. |
Para establecer un formato de entrada específico, pásalo como una cadena a elIgcDateTimeInputComponent. Esto establecerá tanto el formato de entrada esperado por el usuario como elmask. Además, estáinputFormat basado en localización, así que si no se proporciona ninguno, el editor lodd/MM/yyyy aplicará por defecto.
<igc-date-time-input input-format="dd-MM-yy" display-format="medium"/>
Si todo ha ido bien deberías ver lo siguiente en tu navegador:
Display format
La entrada de fecha y hora expone formatos predefinidos para mostrar la fecha/hora de varias maneras. Todos los ejemplos siguientes se proporcionan en la configuración regional en-US.
| Opción | Ejemplo |
|---|---|
short |
17/7/22, 00:00 |
medium |
17 de julio de 2022, 00:00:00 |
long |
17 de julio de 2022 a las 00:00:00 GMT+3 |
full |
Domingo 17 de julio de 2022 a las 12:00:00 a. m., hora de verano de Europa del Este |
shortDate |
7/17/22 |
mediumDate |
17 de julio de 2022 |
longDate |
17 de julio de 2022 |
fullDate |
domingo, 17 de julio de 2022 |
shortTime |
12:00 AM |
mediumTime |
12:00:00 AM |
longTime |
12:00:00 GMT+3 |
fullTime |
12:00:00 a.m., hora de verano de Europa del Este |
Además, los usuarios pueden construir una cadena displayFormat utilizando los símbolos admitidos que se describen en la siguiente tabla.
| Tipo | Formato | Descripción | Ejemplo |
|---|---|---|---|
| Día | d |
Dígitos mínimos. | 7, 17 |
dd |
Cero acolchado. | 07, 17 | |
| Mes | M |
Dígitos mínimos. | 3, 10 |
MM |
Cero acolchado. | 03, 10 | |
MMM |
Abreviado | Oct | |
MMMM |
Ancho | Octubre | |
MMMMM |
Angosto | O | |
| Año | y |
Numérico | 2022 |
yy |
Dos dígitos | 22 | |
yyy |
Numérico | 2022 | |
yyyy |
Numérico | 2022 | |
| Hora 1-12 | h |
Dígitos mínimos | 1, 12 |
hh |
Cero acolchado | 01, 12 | |
| Hora 1-24 | H |
Dígitos mínimos | 1, 23 |
HH |
Cero acolchado | 01, 23 | |
| Minuto | m |
Dígitos mínimos | 1, 59 |
mm |
Cero acolchado | 01, 59 | |
| Segundo | s |
Dígitos mínimos | 1, 59 |
ss |
Cero acolchado | 01, 59 | |
| Periodo de tiempo | t |
Abreviado | AM PM |
tt |
Abreviado | AM PM | |
ttt |
Corto | mediodía | |
tttt |
Largo | mediodía | |
ttttt |
Angosto | norte |
[!Note] Many locales use the same time period string, irrespective of the format specified. Also, it has an effect only if a 12-hour clock is used.
Min/max value
Puedes especificarmin propiedades ymax para restringir la entrada y controlar la validez del componente. Al igual que lavalue propiedad, pueden ser de su tipostring.
const input = document.querySelector('igc-date-time-input') as IgcDateTimeInputComponent;
input.min = new Date(2021, 0, 1);
<igc-date-time-input max="2022-01-01T21:00:00.000Z"></igc-date-time-input>
Si todo ha ido bien, el componente seráinvalid si el valor es mayor o menor que las fechas indicadas. Echa un vistazo al ejemplo a continuación:
Step up/down
ExponeIgcDateTimeInputComponent al públicostepUp ystepDown a los métodos. Incrementan o disminuyen una fecha y horaDatePart específicas y pueden usarse de varias maneras.
En el primer escenario, si no se pasa ningún DatePart específico al método, un DatePart por defecto incrementará o decrementará, en función de la implementación del componente especificadoinputFormat y del componente interno. En el segundo escenario, puedes especificar explícitamente qué DatePart manipular, ya que puede adaptarse a diferentes requisitos. Además, ambos métodos aceptan un parámetro opcionaldelta de número de tipo que puede usarse para establecer el paso de paso hacia arriba/abajo.
Además,spinDelta es una propiedad que puede usarse para aplicar un delta diferente a cada segmento de fecha. Se aplicará al girar con el teclado, la rueda del ratón o con losstepUp métodos andstepDown, siempre que no tengan el parámetro delta proporcionado, ya que tendrá prioridadspinDelta.
const input = document.getElementById('dateTimeInput') as IgcDateTimeInputComponent;
const spinDelta: DatePartDeltas = {
date: 2,
month: 3,
year: 10,
};
input.spinDelta = spinDelta;
Pruébelo en el siguiente ejemplo:
Styling
ElIgcDateTimeInputComponent componente expone las piezas CSS de casi todos sus elementos internos. La siguiente tabla enumera todas las partes CSS expuestas:
| Nombre | Descripción |
|---|---|
container |
El contenedor principal que contiene todos los elementos de entrada principales. |
input |
El elemento de entrada nativo. |
label |
El elemento de etiqueta nativo. |
prefix |
El contenedor de prefijo. |
suffix |
El contenedor del sufijo. |
helper-text |
El contenedor de texto auxiliar. |
igc-date-time-input::part(input) {
background-color: var(--ig-primary-100);
border-color: var(--ig-secondary-500);
box-shadow: none;
}
igc-date-time-input::part(prefix),
igc-date-time-input::part(suffix) {
color: var(--ig-primary-600-contrast);
background-color: var(--ig-primary-500);
border-color: var(--ig-secondary-500);
}