Visão geral do componente Seletor de data do Web Components

O Seletor de Data Ignite UI for Web Components é um componente rico em recursos usado para inserir uma data por meio da entrada manual de texto ou escolher valores de data em uma caixa de diálogo de calendário que aparece. Leve e simples de usar, o Seletor de datas permite que os usuários naveguem até a data desejada com várias opções de visualização – mês, ano e década. Ele também oferece suporte a propriedades de validação comuns, como restrições de data mínima e máxima e campos obrigatórios.

O componente Seletor de data Ignite UI for Web Components permite que os usuários escolham uma única data por meio de um menu suspenso de calendário de exibição mensal ou campo de entrada editável. O Seletor de Data Web Components também oferece suporte a um modo de diálogo para seleção somente no calendário, formatação de data personalizável e com reconhecimento de localidade e integração de validação.

[!NOTE] The IgcDatePickerComponent is a brand new component from Ignite UI for Web Components version 5.0.0. The old IgcDatePickerComponent prior to this version has been renamed to XDatePicker and its respective documentation page can be found under "Deprecated Components"

Web Components Date Picker Example

Abaixo, você pode ver um exemplo que demonstra como o Seletor de Data funciona quando os usuários podem escolher uma data por meio de uma entrada de texto manual e clicar no ícone de calendário à esquerda para navegar até ela. Veja como renderizá-lo.

Getting Started with Web Components Date Picker

Primeiro, você precisa instalar o Ignite UI for Web Components executando o seguinte comando:

npm install igniteui-webcomponents

Você então precisará importar oIgcDatePickerComponent CSS necessário e registrar seu módulo, assim:

import { defineComponents, IgcDatePickerComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcDatePickerComponent);

Para uma introdução completa ao Ignite UI for Web Components, leia o tópico Comecando.

Using the Web Components Date Picker Component

Display Date Picker

To instantiate a IgcDatePickerComponent in its default dropdown state, use the following code:

<igc-date-picker>
    <p slot="helper-text">Date</p>
</igc-date-picker>

Options

The IgcDatePickerComponent can be bound to a date or a string.

const DatePicker = document.querySelector('igc-date-picker') as IgcDatePickerComponent;
const date = new Date();

DatePicker.value = date;

Se uma string estiver vinculada ao seletor, ela precisará estar no formato ISO 8601:

<igc-date-picker value="2000-01-01"></igc-date-picker>

Projecting components

Com slots de prefixo e sufixo, podemos adicionar conteúdo diferente antes e depois do conteúdo principal da entrada.

<igc-date-picker id="DatePicker">
    <igc-icon slot="suffix" name="arrow_upward" collection="material" class="small" onclick="DatePicker.stepUp()"></igc-icon>
</igc-date-picker>

O snippet acima adicionará um ícone adicional no final da entrada, logo após o ícone de limpeza padrão. Isso não removerá o ícone de alternância padrão, pois prefixos e sufixos podem ser empilhados um após o outro.

Personalizando os ícones de alternância e limpeza

The calendar and clear icon could be templated by using the calendar and clear slots:

<igc-date-picker id="DatePicker">
    <igc-icon slot="calendar" name="calendar" collection="material" class="small"></igc-icon>
    <igc-icon slot="clear" name="delete" collection="material" class="small"></igc-icon>
</igc-date-picker>

Botões de ação personalizados

The picker's action buttons can be templated using the actions slot:

<igc-date-picker id="DatePicker">
    <igc-button slot="actions" onclick="DatePicker.showWeekNumbers = true">Show Week Numbers</igc-button>
</igc-date-picker>

The IgcDatePickerComponent 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
`ESC`	Fecha o pop-up do calendário e foca o campo de entrada

Examples

Dialog Mode

The IgcDatePickerComponent also supports a dialog mode:

<igc-date-picker id="DatePicker" mode="dialog">
</igc-date-picker>

Display and input format

inputFormat and displayFormat are properties which can be set to make the picker's editor follow a specified format. The inputFormat is locale based, so if none is provided, the picker will default to the one used by the browser.

A good thing to note is that the Date Picker Component will always add a leading zero on the date and month portions if they were provided in a format that does not have it, e.g. d/M/yy becomes dd/MM/yy. This applies only during editing.

displayFormat is used to format the picker's input when it is not focused. If no displayFormat is provided, the picker will use the inputFormat as its displayFormat.

More information about these can be found in the IgcDateTimeInputComponent format section.

Increment and decrement

The IgcDatePickerComponent exposes stepUp and stepDown methods. Both of which come from the IgcDateTimeInputComponent and can be used for incrementing and decrementing a specific DatePart of the currently set date.

<igc-date-picker id="DatePicker">
    <igc-icon slot="prefix" name="arrow_upward" collection="material" onclick="DatePicker.stepUp()"></igc-icon>
    <igc-icon slot="suffix" name="arrow_downward" collection="material" onclick="DatePicker.stepDown()"></igc-icon>
</igc-date-picker>

In Forms

The IgcDatePickerComponent could be used in a form element, the component's min and max properties act as form validators.

In forms, we can handle the igcChange event of the component and update the value of the label.

Calendar Specific settings

The IgcDatePickerComponent can modify some of the calendar's settings via the properties that the Date Picker exposes. Some of these include visibleMonths which allows more than one calendar to be displayed when the picker expands, weekStart which determines the starting day of the week, showWeekNumbers which shows the number for each week in the year and more.

Internationalization

The localization of the IgcDatePickerComponent can be controlled through its locale input.

Here is how a IgcDatePickerComponent with Japanese locale definition would look like:

<igc-date-picker locale="ja-JP">
</igc-date-picker>

Styling

The IgcDatePickerComponent component derives from the IgcInputComponent and IgcCalendarComponent component, so it exposes all available CSS parts. See Input Styling and Calendar Styling for reference.

igc-date-picker::part(header) {
  background-color: var(--ig-primary-500);
  color: var(--ig-primary-500-contrast);
}
igc-date-picker::part(calendar-content) {
  background-color: var(--ig-surface-300);
}
igc-date-picker::part(date-inner current) {
  color: var(--ig-info-300);
  background-color: var(--ig-surface-300);
}
igc-date-picker::part(navigation-button):hover,
igc-date-picker::part(months-navigation):hover,
igc-date-picker::part(years-navigation):hover {
  color: var(--ig-secondary-500);
}
igc-date-picker::part(month-inner current),
igc-date-picker::part(year-inner current),
igc-date-picker::part(navigation-button),
igc-date-picker::part(months-navigation),
igc-date-picker::part(years-navigation) {
  color: var(--ig-info-300);
}
igc-date-picker::part(date-inner selected),
igc-date-picker::part(month-inner selected),
igc-date-picker::part(year-inner selected) {
  color: var(--ig-secondary-500-contrast);
  background-color: var(--ig-secondary-500);
}