Visão geral da entrada de data e hora do React
A Ignite UI for React Entrada de Data e Hora permite que o usuário defina e edite a data e a hora em um elemento de entrada escolhido. O usuário pode editar partes de data e hora usando uma entrada mascarada editável. Além disso, pode-se 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 pacote npm Ignite UI for React correspondente executando o seguinte comando:
npm install igniteui-react
Em seguida, você precisará importar o IgrDateTimeInput CSS necessário, assim:
import { IgrDateTimeInput } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
Value binding
A maneira mais fácil de definir o valor do IgrDateTimeInput componente é passando um objeto Date para a value propriedade:
<IgrDateTimeInput value={someValue}></IgrDateTimeInput>
The IgrDateTimeInput also accepts ISO 8601 strings.
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
Possui IgrDateTimeInput navegação intuitiva pelo teclado que facilita o incremento, diminuição ou salto entre outros DateParts sem a necessidade de 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 suporta IgrDateTimeInput 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 IgrDateTimeInput. Isso definirá o formato de entrada do usuário esperado e o mask. Além disso, o inputFormat é baseado em localidade, portanto, se nenhum for fornecido, o editor será padronizado para dd/MM/yyyy.
<IgrDateTimeInput inputFormat="dd-MM-yy" displayFormat="medium"></IgrDateTimeInput>
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.
<IgrDateTimeInput min={minDate} max={maxDate}></IgrDateTimeInput>
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 IgrDateTimeInput expõe público stepUp e stepDown métodos. Eles incrementam ou diminuem um específico DatePart da data e hora definidas no momento e podem ser usados de duas 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.
Experimente no exemplo abaixo:
Styling
O IgrDateTimeInput componente expõe partes CSS para quase todos os seus elementos internos. A tabela a seguir lista todas as partes CSS expostas:
| 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);
}