Descripción general de la entrada de fecha y hora React
La Ignite UI for React permite al usuario configurar y editar la fecha y la hora en un elemento de entrada elegido. El usuario puede editar las partes de fecha y hora utilizando una entrada enmascarada editable. Además, se puede especificar un formato de visualización y entrada deseado, así como valores mínimos y máximos para utilizar la validación.
Usage
Primero, debes instalar el paquete npm Ignite UI for React correspondiente ejecutando el siguiente comando:
npm install igniteui-react
Luego tendrás que importar elIgrDateTimeInput CSS necesario, así:
import { IgrDateTimeInput } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
Value binding
La forma más sencilla de establecer el valor delIgrDateTimeInput componente es pasando un objeto Date a lavalue propiedad:
<IgrDateTimeInput value={someValue}></IgrDateTimeInput>
TambiénIgrDateTimeInput 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
TieneIgrDateTimeInput 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
SoportaIgrDateTimeInput 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 elIgrDateTimeInput. 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.
<IgrDateTimeInput inputFormat="dd-MM-yy" displayFormat="medium"></IgrDateTimeInput>
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.
<IgrDateTimeInput min={minDate} max={maxDate}></IgrDateTimeInput>
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
ExponeIgrDateTimeInput 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.
Pruébelo en el siguiente ejemplo:
Styling
ElIgrDateTimeInput 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);
}