Visão geral da entrada de data e hora Blazor
A Ignite UI for Blazor 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
Antes de usar o IgbDateTimeInput, você precisa registrá-lo da seguinte forma:
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbDateTimeInputModule));
Você também precisará vincular um arquivo CSS adicional para aplicar o estilo ao componente IgbDateTimeInput. O seguinte precisa ser colocado no arquivo wwwroot/index.html em um projeto Blazor Web Assembly ou no arquivo Pages/_Host.cshtml em um projeto Blazor Server:
<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
Value binding
A maneira mais fácil de definir o valor do componente IgbDateTimeInput é passando um objeto Date para a propriedade Value:
<IgbDateTimeInput @ref="DateTimeInputRef" Value="@Date">
<IgbIcon IconName="clear" Collection="myIcons" slot="prefix" @onclick="OnClear"></IgbIcon>
</IgbDateTimeInput>
Keyboard Navigation
O IgbDateTimeInput 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 IgbDateTimeInput 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 IgbDateTimeInput. 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.
<IgbDateTimeInput @ref="DateTimeInputRef" InputFormat="dd-MM-yy" DisplayFormat="medium">
<IgbIcon IconName="clear" Collection="myIcons" slot="prefix" @onclick="OnClear"></IgbIcon>
</IgbDateTimeInput>
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 as 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.
<IgbDateTimeInput @ref="DateTimeInputRef" Min="@MinDate" Max="@MaxDate">
<IgbIcon IconName="clear" Collection="myIcons" slot="prefix" @onclick="OnClear"></IgbIcon>
</IgbDateTimeInput>
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 IgbDateTimeInput expõe métodos públicos StepUp e StepDown. Eles incrementam ou decrementam um DatePart específico 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.
Experimente no exemplo abaixo:
Styling
The IgbDateTimeInput 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);
}