Descripción general de la entrada de fecha y hora Web Components
La Ignite UI for Web Components permite al usuario configurar y editar la fecha y la hora en un elemento de entrada elegido. El usuario puede editar partes de fecha y hora utilizando una entrada enmascarada editable. Además, se puede especificar el formato de entrada y visualización deseado, así como los valores mínimo y máximo para utilizar la validación.
Usage
Primero, debe instalar la Ignite UI for Web Components ejecutando el siguiente comando:
npm install igniteui-webcomponents
Luego necesitarás importar IgcDateTimeInputComponent, su CSS necesario y registrar su módulo, así:
import { defineComponents, IgcDateTimeInput } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
defineComponents(IgcDateTimeInput);
Para obtener una introducción completa a Ignite UI for Web Components, lea el tema Introducción.
Value binding
La forma más fácil de establecer el valor del IgcDateTimeInputComponent componente es pasar un objeto Date a la value propiedad:
const input = document.querySelector('igc-date-time-input') as IgcDateTimeInputComponent;
const date = new Date();
input.value = date;
El IgcDateTimeInputComponent también acepta cadenas ISO 8601.
La cadena puede ser una cadena ISO completa, en el formato YYYY-MM-DDTHH:mm:ss.sssZ o podría separarse en partes de solo fecha y solo de hora.
Solo cita
Si una cadena de solo fecha está enlazada a la value propiedad del componente, debe tener el formato YYYY-MM-DD. El inputFormat todavía se usa al escribir valores en la entrada y no tiene que estar en el mismo formato. Además, al enlazar una cadena de solo fecha, la directiva evitará los desplazamientos de tiempo forzando el tiempo que debe ser T00:00:00.
Tiempo solo
Las cadenas de solo tiempo normalmente no están definidas en la especificación ECMA; sin embargo, para permitir que la directiva se integre en escenarios que requieren soluciones de solo tiempo, admite el formato de 24 horas: HH:mm:ss. No se admite el formato de 12 horas.
Cadena ISO completa
Si se vincula una cadena ISO completa, la directiva la analizará solo si se proporcionan todos los elementos requeridos por Date.parse.
Todos los valores falsos, incluido InvalidDate, se analizarán como null. Las cadenas ISO completas o de solo fecha, solo de hora o incompletas se analizarán como InvalidDate.
Keyboard Navigation
IgcDateTimeInputComponent tiene una navegación intuitiva con el teclado que facilita incrementar, disminuir o saltar a través de diferentes DateParts, entre otras, sin tener que tocar el mouse.
| Llaves | Descripción |
|---|---|
| ← | Mover un personaje al principio |
| → | Mover un personaje hasta el final. |
| Hogar | Ir al principio |
| Fin | Mover hasta el final |
| Ctrl / Comando + ← | Ir al principio de la sección de fecha/hora: la actual o la izquierda |
| Ctrl / Comando + → | 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 / Comando +; | Establece la fecha/hora actual como valor del editor |
Setting formats
IgcDateTimeInputComponent admite diferentes formatos de visualización y entrada.
Utiliza Intl.DateTimeFormat, lo que le permite admitir opciones de formato predefinidas, como long y,y short medium full. Además, también puede aceptar una cadena personalizada construida a partir de caracteres admitidos, como dd-MM-yy. Además, si no se proporciona ninguno displayFormat, el componente usará el inputFormat como tal.
Input Format
La siguiente tabla muestra los formatos que son compatibles con el componente inputFormat:
| 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áselo como una cadena a the IgcDateTimeInputComponent. Esto establecerá tanto el formato de entrada de usuario esperado como el mask. Además, el se basa en la inputFormat configuración regional, por lo que si no se proporciona ninguno, el editor lo hará de dd/MM/yyyy forma predeterminada.
<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
Puede especificar min y max propiedades para restringir la entrada y controlar la validez del componente. Al igual que la value propiedad, pueden ser de tipo string.
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 salió bien, el componente no será invalid si el valor es mayor o menor que las fechas indicadas. Mira el siguiente ejemplo:
Step up/down
El IgcDateTimeInputComponent público stepUp expone y stepDown los métodos. Aumentan o disminuyen una fecha y hora específicas DatePart establecidas actualmente y se pueden usar de dos maneras.
En el primer escenario, si no se pasa ningún DatePart específico al método, un DatePart predeterminado se incrementará o disminuirá, en función de la implementación del componente interno inputFormat y especificado. En el segundo escenario, puede especificar explícitamente qué DatePart se va a manipular, ya que puede adaptarse a diferentes requisitos. Además, ambos métodos aceptan un parámetro opcional delta de tipo number que se puede usar para establecer el paso stepUp/stepDown.
Además, spinDelta es una propiedad que se puede usar para aplicar un delta diferente a cada segmento de fecha y hora. Se aplicará al girar con el teclado, la rueda del ratón o con los stepUp métodos and stepDown, siempre y cuando no tengan el parámetro delta proporcionado ya que tendrá prioridad sobre spinDelta.
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
El componente IgcDateTimeInputComponent deriva del componente IgcInputComponent, por lo que expone todas las partes CSS disponibles. Consulte Estilo de entrada como referencia.