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
The easiest way to set the value of the IgcDateTimeInputComponent component is by passing a Date object to the value property:
const input = document.querySelector('igc-date-time-input') as IgcDateTimeInputComponent;
const date = new Date();
input.value = date;
The IgcDateTimeInputComponent also accepts ISO 8601 strings.
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
If a date-only string is bound to the value property of the component, it needs to be in the format YYYY-MM-DD. The inputFormat is still used when typing values in the input and it does not have to be in the same format. Additionally, when binding a date-only string, the directive will prevent time shifts by coercing the time to be T00:00:00.
Tiempo solo
Time-only strings are normally not defined in the ECMA specification, however to allow the directive to be integrated in scenarios which require time-only solutions, it supports the 24 hour format - HH:mm:ss. The 12 hour format is not supported.
Cadena ISO completa
If a full ISO string is bound, the directive will parse it only if all elements required by Date.parse are provided.
All falsy values, including InvalidDate will be parsed as null. Incomplete date-only, time-only, or full ISO strings will be parsed as InvalidDate.
Keyboard Navigation
The IgcDateTimeInputComponent has intuitive keyboard navigation that makes it easy to increment, decrement, or jump through different DateParts among others without having to touch the 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 / 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.
It uses Intl.DateTimeFormat which allows it to support predefined format options, such as long and short, medium and full. Additionally, it can also accept a custom string constructed from supported characters, such as dd-MM-yy. Also, if no displayFormat is provided, the component will use the inputFormat as such.
Input Format
The table bellow shows formats that are supported by the component's 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. |
To set a specific input format, pass it as a string to the IgcDateTimeInputComponent. This will set both the expected user input format and the mask. Additionally, the inputFormat is locale based, so if none is provided, the editor will default to dd/MM/yyyy.
<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
You can specify min and max properties to restrict input and control the validity of the component. Just like the value property, they can be of type 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>
If all went well, the component will be invalid if the value is greater or lower than the given dates. Check out the example below:
Step up/down
The IgcDateTimeInputComponent exposes public stepUp and stepDown methods. They increment or decrement a specific DatePart of the currently set date and time and can be used in a couple of ways.
In the first scenario, if no specific DatePart is passed to the method, a default DatePart will increment or decrement, based on the specified inputFormat and the internal component implementation. In the second scenario, you can explicitly specify what DatePart to manipulate as it may suite different requirements. Also, both methods accept an optional delta parameter of type number which can be used to set the stepUp/stepDown step.
Additionally, spinDelta is a property that can be used to apply a different delta to each date time segment. It will be applied when spinning with the keyboard, mouse wheel or with the stepUp and stepDown methods, as long as they don't have the delta parameter provided since it will take precedence over 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
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);
}