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ê então precisará importar oIgcDateTimeInputComponent 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 Comecando.
Value binding
A maneira mais fácil de definir o valor doIgcDateTimeInputComponent componente é passando um objeto Date para avalue propriedade:
const input = document.querySelector('igc-date-time-input') as IgcDateTimeInputComponent;
const date = new Date();
input.value = date;
TambémIgcDateTimeInputComponent 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
EleIgcDateTimeInputComponent 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
EleIgcDateTimeInputComponent 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 oIgcDateTimeInputComponent. 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.
<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 especificarmin propriedades emax para restringir a entrada e controlar a validade do componente. Assim como avalue propriedade, eles podem ser do tipostring.
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 correu bem, o componente seráinvalid se o valor for maior ou menor que as datas indicadas. Confira o exemplo abaixo:
Step up/down
OIgcDateTimeInputComponent 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.
Além disso,spinDelta é uma propriedade que pode ser usada para aplicar um delta diferente a cada segmento de data-hora. Ele será aplicado ao girar com o teclado, a roda do mouse ou com osstepUp métodos andstepDown, desde que não tenham o parâmetro delta fornecido, pois ele terá precedênciaspinDelta.
const input = document.getElementById('dateTimeInput') as IgcDateTimeInputComponent;
const spinDelta: DatePartDeltas = {
date: 2,
month: 3,
year: 10,
};
input.spinDelta = spinDelta;
Experimente no exemplo abaixo:
Styling
OIgcDateTimeInputComponent 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);
}