Visão geral do componente Angular Date Picker

Angular Date Picker é um componente rico em recursos usado para inserir uma data por meio de 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 Date Picker no Angular permite que os usuários naveguem até uma data desejada com várias opções de visualização – mês, ano, década. Existem as propriedades usuais min, max e required para adicionar validação.

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

Angular Date Picker Example

Abaixo você pode ver um exemplo que demonstra como o Angular Date Picker funciona quando os usuários estão habilitados a 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 Ignite UI for Angular Date Picker

Para começar a usar o componente Ignite UI for Angular Date Picker, primeiro você precisa instalar Ignite UI for Angular. Em um aplicativo Angular existente, digite o seguinte comando:

ng add igniteui-angular

Para obter uma introdução completa ao Ignite UI for Angular, leia o tópico de introdução.

O próximo passo é importar o IgxDatePickerModule no seu arquivo app.module.ts.

Note

Como o seletor usa o IgxCalendarComponent, ele também depende do BrowserAnimationsModule e, opcionalmente, do HammerModule para interações de toque, então eles também precisam ser adicionados ao módulo:

import { HammerModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IgxDatePickerModule } from 'igniteui-angular';
// import { IgxDatePickerModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxDatePickerModule, BrowserAnimationsModule, HammerModule],
    ...
})
export class AppModule {}

Como alternativa, a partir da 16.0.0 você pode importar o IgxDatePickerComponent como uma dependência autônoma ou usar o token IGX_DATE_PICKER_DIRECTIVES para importar o componente e todos os seus componentes e diretivas de suporte.

// home.component.ts

import { HammerModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IGX_DATE_PICKER_DIRECTIVES } from 'igniteui-angular';
// import { IGX_DATE_PICKER_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <igx-date-picker>
        <label igxLabel>Date</label>
    </igx-date-picker>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [BrowserAnimationsModule, HammerModule, IGX_DATE_PICKER_DIRECTIVES]
    /* or imports: [BrowserAnimationsModule, HammerModule, IgxDatePickerComponent, IgxLabelDirective] */
})
export class HomeComponent {}

Agora que você importou o módulo Ignite UI for Angular Date Picker ou as diretivas, você pode começar a usar o componente igx-date-picker.

Using the Angular Date Picker Component

Display Date picker

Para instanciar um Seletor de Data em seu estado dropdown padrão, use o seguinte código:

<igx-date-picker>
    <label igxLabel>Date</label>
</igx-date-picker>

Options

O IgxDatePickerComponent pode ser vinculado a uma date ou a uma string.

<igx-date-picker [value]="date"></igx-date-picker>

public date = new Date(2000, 0, 1);

Se uma string estiver vinculada ao seletor, ela precisará ser uma string somente de data no formato ISO 8601:

<igx-date-picker [value]="'2000-01-01'"></igx-date-picker>

Mais informações sobre isso podem ser encontradas na seção ISO do Editor DateTime.

A vinculação bidirecional é possível por meio de ngModel:

<igx-date-picker [(ngModel)]="date"></igx-date-picker>

Bem como através da entrada value:

<igx-date-picker [(value)]="date"></igx-date-picker>

Além disso, formControlName pode ser definido no seletor, para usá-lo em um formulário reativo:

<form [formGroup]="form">
    <igx-date-picker formControlName="datePicker"></igx-date-picker>
</form>

export class SampleFormComponent {
    // ...
    public form: FormGroup;
    constructor(private fb: FormBuilder) {
        this.form = this.fb.group({
            datePicker: ['', Validators.required]
        });
    }
}

Note

O seletor sempre retorna um valor Date, o que significa que se ele for vinculado ao modelo ou vinculado bidirecionalmente a uma variável de string, depois que uma nova data for escolhida, ela será do tipo Date.

Projecting components

O IgxDatePickerComponent permite a projeção de componentes filhos que o IgxInputGroupComponent suporta (com exceção de IgxInput) -igxLabel, igx-hint / IgxHint, igx-prefix / igxPrefix, igx-suffix / igxSuffix. Informações mais detalhadas sobre isso podem ser encontradas no tópico Label & Input.

<igx-date-picker #datePicker>
    <igx-icon igxSuffix (click)="datePicker.open()">keyboard_arrow_down</igx-icon>
</igx-date-picker>

O snippet acima adicionará um ícone de alternância 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, embora prefixos e sufixos possam ser empilhados um após o outro.

Personalizando os ícones de alternância e limpeza

O IgxDatePickerComponent pode ser configurado com IgxPickerToggleComponent e IgxPickerClearComponent. Eles podem ser usados para alterar os ícones de alternância e limpeza sem precisar adicionar seus próprios manipuladores de clique.

 <igx-date-picker>
    <label igxLabel>Select a Date</label>
    <igx-picker-toggle igxPrefix>
        <igx-icon>calendar_view_day</igx-icon>
    </igx-picker-toggle>
    <igx-picker-clear igxSuffix>
        <igx-icon>delete</igx-icon>
    </igx-picker-clear>
</igx-date-picker>

Botões de ação personalizados

Os botões de ação do seletor podem ser modificados de duas maneiras:

o texto do botão pode ser alterado usando as propriedades de entrada todayButtonLabel e cancelButtonLabel:

<igx-date-picker [todayButtonLabel]="'今日'" [cancelButtonLabel]="'キャンセル'"></igx-date-picker>

todos os botões podem ser modelados usando a diretiva igxPickerActions: Com ela você obtém acesso ao calendar do seletor de datas e todos os seus membros:

<igx-date-picker>
    <ng-template igxPickerActions let-calendar>
        <button igxButton="flat" (click)="calendar.viewDate = today">Today</button>
    </ng-template>
</igx-date-picker>

Abrir e fechar a interface do calendário do IgxDatePickerComponent com o teclado está disponível apenas no modo dropdown e pode ser acionado por meio das combinações de teclas abaixo:

Chaves	Descrição
`Espaço`	Exibe o pop-up do calendário e o focaliza
`Alt` + `↓`	Exibe o pop-up do calendário e o focaliza
`Esc`	Fecha o pop-up do calendário e foca o campo de entrada
`Entrar`	Fecha o pop-up do calendário, seleciona a data em foco e move o foco para o campo de entrada
`Alt` + `↑`	Fecha o pop-up do calendário e foca o campo de entrada

Como o IgxDatePickerComponent usa o IgxDateTimeEditorDirective ele herda sua navegação pelo teclado.

Examples

Dialog Mode

O IgxDatePickerComponent também suporta um modo dialog:

<igx-date-picker [mode]="'dialog'"></igx-date-picker>

Display and input format

inputFormat e displayFormat são propriedades que podem ser definidas para fazer o editor do seletor seguir um formato especificado. A propriedade inputFormat é usada quando o seletor está no modo dropdown e governa a máscara editável da entrada, bem como seu placeholder (se nenhum for definido). Além disso, o inputFormat é baseado em localidade, então se nenhum for fornecido, o seletor usará como padrão o usado pelo navegador.

Uma coisa boa a ser notada é que o Angular Date Picker Component no Ignite UI sempre adicionará um zero à esquerda nas partes de date e month se elas forem fornecidas em um formato que não o tenha, por exemplo, d/M/yy se torna dd/MM/yy. Isso se aplica somente durante a edição.

displayFormat por outro lado usa DatePipe do Angular e é usado para formatar a entrada do seletor quando ele não está em foco. Se nenhum displayFormat for fornecido, o seletor usará o inputFormat como seu displayFormat. Alternativamente, se a propriedade inputFormat não estiver definida, o formato de entrada será inferido do displayFormat caso ele possa ser analisado como contendo apenas partes numéricas de data e hora.

Mais informações sobre eles podem ser encontradas na seção de exemplos IgxDateTimeEditor.

Note

O IgxDatePicker agora suporta entrada IME. Quando a composição termina, o controle converte os números de caracteres largos para caracteres ASCII.

Increment and decrement

O IgxDatePickerComponent expõe métodos de increment e decrement. Ambos vêm da IgxDateTimeEditorDirective e podem ser usados para incrementar e decrementar uma DatePart específica da data definida atualmente.

<igx-date-picker #datePicker>
    <igx-icon igxPrefix (click)="datePicker.increment(DatePart.Month, 3)">keyboard_arrow_up</igx-icon>
    <igx-icon igxPrefix (click)="datePicker.decrement(DatePart.Year. 4)">keyboard_arrow_down</igx-icon>
</igx-date-picker>

Ele também tem uma propriedade de entrada spinDelta que pode ser usada para incrementar ou decrementar uma parte específica da data atualmente definida.

<igx-date-picker [spinDelta]="{date: 2, month: 3, year: 4}"></igx-date-picker>

In Angular Forms

O IgxDatePickerComponent suporta todas as diretivas do núcleo FormsModule, NgModel e ReactiveFormsModule (FormControl, FormGroup, etc.). Isso também inclui as funções Forms Validators. Além disso, as propriedades minValue e maxValue do componente agem como validadores de formulário.

Você pode ver o IgxDatePickerComponent em um formulário reativo visitando nosso tópico Integração de Formulários Reativos.

Usando o seletor de data e hora juntos

Em alguns casos, quando o IgxDatePicker e o IgxTimePicker são usados juntos, pode ser necessário vinculá-los ao mesmo valor do objeto Date.

Para conseguir isso em formulários baseados em modelos, use o ngModel para vincular ambos os componentes ao mesmo objeto Date.

Em formulários reativos, podemos manipular o evento valueChange de cada componente e atualizar o valor do outro.

Calendar Specific settings

O IgxDatePickerComponent usa o IgxCalendarComponent e você pode modificar algumas de suas configurações por meio das propriedades que o seletor de data expõe. Algumas delas incluem displayMonthsCount, que permite que mais de um calendário seja exibido quando o seletor expande, weekStart, que determina o dia inicial da semana, showWeekNumbers, que mostra o número de cada semana do ano e muito mais.

Internationalization

A localização do IgxDatePickerComponent pode ser controlada por meio de sua entrada locale. Além disso, usando os modelos igxCalendarHeader e igxCalendarSubheader, fornecidos pelo IgxCalendarComponent, você pode especificar a aparência do seu cabeçalho e subcabeçalho. Mais informações sobre como usar esses modelos podem ser encontradas no tópico IgxCalendarComponent.

Veja como ficaria um Angular Date Picker com definição de localidade japonesa:

<igx-date-picker locale="ja-JP" [value]="date">
  <ng-template igxCalendarHeader let-format>
    {{ format.month.combined | titlecase }}{{format.day.combined }}{{ format.weekday.combined }}
  </ng-template>
  <ng-template igxCalendarSubheader let-format>
    <span (click)="format.yearView()">{{ format.year.combined }}</span>
    <span (click)="format.monthView()">{{ format.month.combined | titlecase }}</span>
  </ng-template>
</igx-date-picker>

Estilização

Para começar a estilizar o seletor de data, precisamos importar o arquivo index, onde todas as funções do tema e mixins de componentes estão localizados:

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

O Angular Date Picker usa o tema do calendário, então temos que criar um novo tema que estenda o calendar-theme e usar alguns de seus parâmetros para estilizar os itens do seletor de data:

$custom-datepicker-theme: calendar-theme(
  $header-background: #345779,
  $content-background: #fdfdfd,
  $header-foreground: #ffffff,
  $date-current-foreground: #2dabe8,
  $navigation-color: #2dabe8,
  $date-selected-foreground: #fdfdfd,
  $date-current-background: #fdfdfd,
  $navigation-hover-color: #345779,
  $ym-current-foreground: #2dabe8,
  $ym-hover-foreground: #2dabe8,
  $picker-foreground: #2dabe8,
  $picker-hover-foreground: #345779,
);

O último passo é passar o tema personalizado do Date Picker:

@include css-vars($custom-datepicker-theme);

Warning

Se o componente estiver usando um Emulated ViewEncapsulation, é necessário penetrate neste encapsulamento usando::ng-deep

:host {
  ::ng-deep {
    @include css-vars($custom-datepicker-theme);
  }
}

API References

Theming Dependencies

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

Visão geral do componente Angular Date Picker

Angular Date Picker Example

Getting Started with Ignite UI for Angular Date Picker

Note

Using the Angular Date Picker Component

Display Date picker

Options

Note

Projecting components

Personalizando os ícones de alternância e limpeza

Botões de ação personalizados

Keyboard Navigation

Examples

Dialog Mode

Display and input format

Note

Increment and decrement

In Angular Forms

Usando o seletor de data e hora juntos

Calendar Specific settings

Internationalization

Estilização

Warning

API References

Theming Dependencies

Additional Resources

Temas