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

The easiest way to set the value of the IgrDateTimeInput component is by passing a Date object to the value property:

<IgrDateTimeInput value={someValue}></IgrDateTimeInput>

The IgrDateTimeInput also accepts ISO 8601 strings.

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

If a date-only string is bound to the value property of the component, it needs to be in the format YYYY-MM-DD. The inputFormat is still used when typing values in the input and it does not have to be in the same format. Additionally, when binding a date-only string, the directive will prevent time shifts by coercing the time to be T00:00:00.

Somente tempo

Time-only strings are normally not defined in the ECMA specification, however to allow the directive to be integrated in scenarios which require time-only solutions, it supports the 24 hour format - HH:mm:ss. The 12 hour format is not supported.

Sequência ISO completa

If a full ISO string is bound, the directive will parse it only if all elements required by Date.parse are provided.

All falsy values, including InvalidDate will be parsed as null. Incomplete date-only, time-only, or full ISO strings will be parsed as InvalidDate.

The IgrDateTimeInput has intuitive keyboard navigation that makes it easy to increment, decrement, or jump through different DateParts among others without having to touch the 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.

It uses Intl.DateTimeFormat which allows it to support predefined format options, such as long and short, medium and full. Additionally, it can also accept a custom string constructed from supported characters, such as dd-MM-yy. Also, if no displayFormat is provided, the component will use the inputFormat as such.

Input Format

The table bellow shows formats that are supported by the component's inputFormat:

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.

To set a specific input format, pass it as a string to the IgrDateTimeInput. This will set both the expected user input format and the mask. Additionally, the inputFormat is locale based, so if none is provided, the editor will default to 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

You can specify min and max properties to restrict input and control the validity of the component. Just like the value property, they can be of type string.

 <IgrDateTimeInput min={minDate} max={maxDate}></IgrDateTimeInput>

If all went well, the component will be invalid if the value is greater or lower than the given dates. Check out the example below:

Step up/down

The IgrDateTimeInput exposes public stepUp and stepDown methods. They increment or decrement a specific DatePart of the currently set date and time and can be used in a couple of ways.

In the first scenario, if no specific DatePart is passed to the method, a default DatePart will increment or decrement, based on the specified inputFormat and the internal component implementation. In the second scenario, you can explicitly specify what DatePart to manipulate as it may suite different requirements. Also, both methods accept an optional delta parameter of type number which can be used to set the stepUp/stepDown step.

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);
}