Visão geral da entrada de data e hora Web Components
O Ignite UI for Web Components Date Time Input permite que o usuário defina e edite a data e a hora em um elemento de entrada escolhido. O usuário pode editar as partes de data e hora usando uma entrada mascarada editável. Além disso, é possível especificar um formato de exibição e entrada desejado, bem como valores mínimo e máximo para utilizar a validação.
Usage
Primeiro, você precisa instalar o Ignite UI for Web Components executando o seguinte comando:
npm install igniteui-webcomponents
Você precisará então importar o IgcDateTimeInputComponent, seu CSS necessário e registrar seu módulo, assim:
import { defineComponents, IgcDateTimeInput } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
defineComponents(IgcDateTimeInput);
Para uma introdução completa ao Ignite UI for Web Components, leia o tópico Introdução.
Value binding
A maneira mais fácil de definir o valor do componente IgcDateTimeInputComponent é passando um objeto Date para a propriedade value:
const input = document.querySelector('igc-date-time-input') as IgcDateTimeInputComponent;
const date = new Date();
input.value = date;
O IgcDateTimeInputComponent também aceita strings ISO 8601.
A sequência pode ser uma sequência ISO completa, no formato YYYY-MM-DDTHH:mm:ss.sssZ, ou pode ser separada em partes somente de data e somente de hora.
Somente data
Se uma string somente de data for vinculada à propriedade value do componente, ela precisa estar no formato YYYY-MM-DD. O inputFormat ainda é usado ao digitar valores na entrada e não precisa estar no mesmo formato. Além disso, ao vincular uma string somente de data, a diretiva impedirá mudanças de tempo forçando o tempo a ser T00:00:00.
Somente tempo
Strings somente de tempo normalmente não são definidas na especificação ECMA, no entanto, para permitir que a diretiva seja integrada em cenários que exigem soluções somente de tempo, ela suporta o formato de 24 horas -HH:mm:ss. O formato de 12 horas não é suportado.
Sequência ISO completa
Se uma string ISO completa for vinculada, a diretiva a analisará somente se todos os elementos exigidos por Date.parse forem fornecidos.
Todos os valores falsos, incluindo InvalidDate serão analisados como null. Strings incompletas somente de data, somente de hora ou ISO completas serão analisadas como InvalidDate.
Keyboard Navigation
O IgcDateTimeInputComponent tem navegação intuitiva pelo teclado que facilita incrementar, decrementar ou pular entre diferentes DateParts, entre outros, sem precisar tocar no mouse.
| Chaves | Descrição |
|---|---|
| ← | Mover um caractere para o início |
| → | Mover um caractere para o final |
| Casa | Mover para o início |
| Fim | Mover para o final |
| Ctrl / Comando + ← | Mover para o início da seção de data/hora - atual ou esquerda |
| Ctrl / Comando + → | Mover para o final da seção de data/hora - atual ou à direita |
| Foco em uma parte de data/hora + ↓ | Decrementa uma parte de data/hora |
| Foco em uma parte de data/hora + ↑ | Incrementa uma parte de data/hora |
| Ctrl / Comando +; | Define a data/hora atual como o valor do editor |
Setting formats
O IgcDateTimeInputComponent suporta diferentes formatos de exibição e entrada.
Ele usa Intl.DateTimeFormat que permite que ele suporte opções de formato predefinidas, como long e short, medium e full. Além disso, ele também pode aceitar uma string personalizada construída a partir de caracteres suportados, como dd-MM-yy. Além disso, se nenhum displayFormat for fornecido, o componente usará o inputFormat como tal.
Input Format
A tabela abaixo mostra os formatos suportados pelo inputFormat do componente:
| Formatar | Descrição |
|---|---|
d |
A data será convertida em zero à esquerda durante a edição. |
dd |
Data com um zero à esquerda explicitamente definido. |
M |
Mês, será forçado com um zero à esquerda durante a edição. |
MM |
Mês com um zero à esquerda explicitamente definido. |
yy |
Formato de ano curto. |
yyyy |
Formato de ano inteiro. |
h |
Horas no formato de 12 horas serão marcadas com um zero à esquerda durante a edição. |
hh |
Horas no formato de 12 horas com um zero à esquerda explicitamente definido. |
H |
Horas no formato de 24 horas serão forçadas com um zero à esquerda durante a edição. |
HH |
Horas no formato de 24 horas, com um zero à esquerda explicitamente definido. |
m |
Os minutos serão marcados com um zero à esquerda durante a edição. |
mm |
Minutos com um zero à esquerda explicitamente definido. |
tt |
Seção AM/PM para formato de 12 horas. |
Para definir um formato de entrada específico, passe-o como uma string para o IgcDateTimeInputComponent. Isso definirá o formato de entrada esperado do usuário e o mask. Além disso, o inputFormat é baseado em localidade, então se nenhum for fornecido, o editor usará como padrão dd/MM/yyyy.
<igc-date-time-input input-format="dd-MM-yy" display-format="medium"/>
Se tudo correr bem, você deverá ver o seguinte no seu navegador:
Display format
A entrada de data e hora expõe formatos predefinidos para exibir data/hora de várias maneiras. Todos os exemplos abaixo são fornecidos em locale en-US.
| Opção | Exemplo |
|---|---|
short |
17/07/22, 12:00 AM |
medium |
17 de julho de 2022, 12:00:00 AM |
long |
17 de julho de 2022 às 12:00:00 AM GMT+3 |
full |
Domingo, 17 de julho de 2022 às 12:00:00 AM Horário de verão da Europa Oriental |
shortDate |
7/17/22 |
mediumDate |
17 de julho de 2022 |
longDate |
17 de julho de 2022 |
fullDate |
Domingo, 17 de julho de 2022 |
shortTime |
12:00 AM |
mediumTime |
12:00:00 AM |
longTime |
12:00:00 AM GMT+3 |
fullTime |
12:00:00 AM Horário de verão da Europa Oriental |
Além disso, os usuários podem construir uma string displayFormat usando os símbolos suportados descritos na tabela a seguir.
| Tipo | Formatar | Descrição | Exemplo |
|---|---|---|---|
| Dia | d |
Dígitos mínimos. | 7, 17 |
dd |
Zero preenchido. | 07, 17 | |
| Mês | M |
Dígitos mínimos. | 3, 10 |
MM |
Zero preenchido. | 03, 10 | |
MMM |
Abreviado | Outubro | |
MMMM |
Largo | outubro | |
MMMMM |
Estreito | O | |
| Ano | y |
Numérico | 2022 |
yy |
Dois dígitos | 22 | |
yyy |
Numérico | 2022 | |
yyyy |
Numérico | 2022 | |
| Hora 1-12 | h |
Dígitos mínimos | 1, 12 |
hh |
Zero preenchido | 01, 12 | |
| Hora 1-24 | H |
Dígitos mínimos | 1, 23 |
HH |
Zero preenchido | 01, 23 | |
| Minuto | m |
Dígitos mínimos | 1, 59 |
mm |
Zero preenchido | 01, 59 | |
| Segundo | s |
Dígitos mínimos | 1, 59 |
ss |
Zero preenchido | 01, 59 | |
| Período de tempo | t |
Abreviado | AM, PM |
tt |
Abreviado | AM, PM | |
ttt |
Curto | meio-dia | |
tttt |
Longo | meio-dia | |
ttttt |
Estreito | não |
[!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
Você pode especificar propriedades min e max para restringir a entrada e controlar a validade do componente. Assim como a propriedade value, elas podem ser do 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>
Se tudo correr bem, o componente será invalid se o valor for maior ou menor que as datas fornecidas. Veja o exemplo abaixo:
Step up/down
O IgcDateTimeInputComponent expõe métodos públicos stepUp e stepDown. Eles incrementam ou decrementam uma DatePart específica da data e hora atualmente definidas e podem ser usados de algumas maneiras.
No primeiro cenário, se nenhuma DatePart específica for passada para o método, uma DatePart padrão será incrementada ou decrementada, com base no inputFormat especificado e na implementação do componente interno. No segundo cenário, você pode especificar explicitamente qual DatePart manipular, pois pode atender a diferentes requisitos. Além disso, ambos os métodos aceitam um parâmetro delta opcional do tipo number que pode ser usado para definir o passo stepUp/stepDown.
Além disso, spinDelta é uma propriedade que pode ser usada para aplicar um delta diferente a cada segmento de data e hora. Ele será aplicado ao girar com o teclado, a roda do mouse ou com os métodos stepUp e stepDown, desde que eles não tenham o parâmetro delta fornecido, pois ele terá precedência sobre spinDelta.
const input = document.getElementById('dateTimeInput') as IgcDateTimeInputComponent;
const spinDelta: DatePartDeltas = {
date: 2,
month: 3,
year: 10,
};
input.spinDelta = spinDelta;
Experimente no exemplo abaixo:
Styling
The IgcDateTimeInputComponent component exposes CSS parts for almost all of its inner elements. The following table lists all of the exposed CSS parts:
| Nome | Descrição |
|---|---|
container |
O wrapper principal que contém todos os principais elementos de entrada. |
input |
O elemento de entrada nativo. |
label |
O elemento de rótulo nativo. |
prefix |
O wrapper de prefixo. |
suffix |
O wrapper de sufixo. |
helper-text |
O wrapper 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);
}