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 usá-losIgbDateTimeInput, você precisa registrá-los 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 aoIgbDateTimeInput componente. O seguinte deve 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 doIgbDateTimeInput componente é passando um objeto Date para aValue propriedade:
<IgbDateTimeInput @ref="DateTimeInputRef" Value="@Date">
<IgbIcon IconName="clear" Collection="myIcons" slot="prefix" @onclick="OnClear"></IgbIcon>
</IgbDateTimeInput>
Keyboard Navigation
EleIgbDateTimeInput 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
EleIgbDateTimeInput 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 oIgbDateTimeInput. 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.
<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 especificarMin propriedades eMax para restringir a entrada e controlar a validade do componente. Assim como aValue propriedade, eles podem ser do tipostring.
<IgbDateTimeInput @ref="DateTimeInputRef" Min="@MinDate" Max="@MaxDate">
<IgbIcon IconName="clear" Collection="myIcons" slot="prefix" @onclick="OnClear"></IgbIcon>
</IgbDateTimeInput>
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
OIgbDateTimeInput 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.
Experimente no exemplo abaixo:
Styling
OIgbDateTimeInput 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);
}