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
You will then need to import the IgrDateTimeInput, its necessary CSS, like so:
import { IgrDateTimeInput } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
Value binding
A maneira mais fácil de definir o valor doIgrDateTimeInput componente é passando um objeto Date para avalue propriedade:
<IgrDateTimeInput value={someValue}></IgrDateTimeInput>
TambémIgrDateTimeInput aceita cordas ISO 8601.
A string pode ser uma string completaISO, no formatoYYYY-MM-DDTHH:mm:ss.sssZ, ou pode ser separada em partes apenas por data e apenas por hora.
Somente data
Se uma string apenas de data estiver vinculada àvalue propriedade do componente, ela precisa estar no formatoYYYY-MM-DD. OinputFormat ainda é usado ao digitar valores na entrada e não precisa estar no mesmo formato. Além disso, ao vincular uma sequência apenas de data, a diretiva evitará deslocamentos temporais ao forçar o horário a serT00:00:00.
Somente tempo
Cadeias de tempo apenas normalmente não são definidas naECMA especificação, porém, para permitir a integração da diretiva em cenários que exigem soluções de tempo único, 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 completaISO for vinculada, a diretiva só a analisará se todos os elementos exigidos pelo Date.parse forem fornecidos.
Todos os valores falsos, incluindoInvalidDate serão analisados comonull. Sequências incompletas de data apenas, apenas tempo ou completasISO serão analisadas comoInvalidDate.
Keyboard Navigation
EleIgrDateTimeInput tem uma navegação intuitiva por teclado que facilita incrementar, diminuir ou pular entre diferentesDateParts 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 / CMD + ← | Mover para o início da seção de data/hora - atual ou esquerda |
| CTRL / CMD + → | 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 / CMD +; | Define a data/hora atual como o valor do editor |
Setting formats
EleIgrDateTimeInput suporta diferentes formatos de exibição e entrada.
Ele usa o Intl.DateTimeFormat, que permite suportar opções de formato pré-definidas, comolong andshort,medium andfull. Além disso, também pode aceitar uma string personalizada construída a partir de caracteres suportados, como.dd-MM-yy Além disso, se não for fornecido,displayFormat o componente usará oinputFormat como tal.
Input Format
A tabela abaixo mostra formatos suportados pelos componentesinputFormat:
| 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 como uma string para oIgrDateTimeInput. Isso vai definir tanto o formato esperado de entrada do usuário quanto omask. Além disso, éinputFormat baseado em localização, então se não houver nenhum fornecido, o editor irá usardd/MM/yyyy por padrão.
<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 especificarmin propriedades emax para restringir a entrada e controlar a validade do componente. Assim como avalue propriedade, eles podem ser do tipostring.
<IgrDateTimeInput min={minDate} max={maxDate}></IgrDateTimeInput>
Se tudo correu bem, o componente seráinvalid se o valor for maior ou menor que as datas indicadas. Confira o exemplo abaixo:
Step up/down
OIgrDateTimeInput público expõestepUp estepDown os métodos. Eles incrementam ou diminuem uma data eDatePart hora específicas e podem ser usadas de algumas maneiras.
No primeiro cenário, se nenhum DatePart específico for passado ao método, um DatePart padrão irá incrementar ou decrementar, com base na implementação do componente especificadoinputFormat e 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 opcionaldelta de número de tipo, que pode ser usado para definir o passo passo/descida.
Experimente no exemplo abaixo:
Styling
OIgrDateTimeInput componente expõe partes do 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);
}