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 issoIgxDatePickerModule 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/date-picker';
// import { IgxDatePickerModule } from '@infragistics/igniteui-angular'; for licensed package

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

Alternativamente,16.0.0 você pode importarIgxDatePickerComponent como uma dependência independente ou usar oIGX_DATE_PICKER_DIRECTIVES token 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/date-picker';
// 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 ou diretivas do Seletor de Data Ignite UI for Angular, pode começar a usar oigx-date-picker componente.

Using the Angular Date Picker Component

Display Date picker

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

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

Options

PodemIgxDatePickerComponent ser vinculados a adate ou astring.

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

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

Se uma string estiver vinculada ao picker, ela precisa ser uma string apenas de data noISO 8601 formato:

<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 ligação bidirecional é possível atravésngModel de:

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

Assim como através davalue entrada:

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

Além disso,formControlName pode ser configurado no seletor para usá-lo de forma reativa:

<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 picker sempre retorna umDate valor, o que significa que, se for limitado por modelo ou bidirecionalmente a uma variável de string, após uma nova data ser escolhida, ele estará do tipoDate.

Projecting components

PermiteIgxDatePickerComponent a projeção dos componentes filhos que suportaIgxInputGroupComponent (com exceção deIgxInput) -igxLabel,igx-hint / IgxHint,igx-prefix / igxPrefix,.igx-suffix / igxSuffix Informações mais detalhadas sobre isso podem ser encontradas no tópico Rótulo & Entrada.

<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

OIgxDatePickerComponent pode ser configurado comIgxPickerToggleComponent e.IgxPickerClearComponent Esses podem ser usados para alterar os ícones de alternância e limpeza sem precisar adicionar seus próprios manipuladores de cliques.

 <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 astodayButtonLabel​cancelButtonLabel propriedades de entrada e E:

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

• Os botões completos podem ser modelados usando aigxPickerActions diretiva: Com ele, você tem acesso ao seletorcalendar de data e a 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>

Keyboard Navigation

Abrir e fecharIgxDatePickerComponent a interface do calendário com o teclado está disponível apenas paradropdown o modo e pode ser acionado pelas 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 usaIgxDatePickerComponent o,IgxDateTimeEditorDirective ele herda sua navegação por teclado.

Examples

Dialog Mode

TambémIgxDatePickerComponent suporta umdialog modo:

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

Display and input format

inputFormatedisplayFormat são propriedades que podem ser definidas para fazer o editor do seletor seguir um formato especificado. AinputFormat propriedade é usada quando o seletor está nodropdown modo e governa a máscara editável da entrada, assim como seu marcador (se nenhum estiver definido). Além disso, oinputFormat seletor é baseado em localização, então se não for fornecido, o seletor será usado pelo navegador por padrão.

Uma coisa boa a notar é que o componente Angular Date Picker em Ignite UI sempre adiciona um zero à esquerda nasdate partes emonth se forem fornecidas em um formato que não o tenha, por exemplo, becomed/M/yy​dd/MM/yy. Isso se aplica apenas durante a edição.

displayFormatpor outro lado, usa Angular 'DatePipes e é usado para formatar a entrada do seletor quando ela não está focada em foco. Se nãodisplayFormat for fornecido, o selecionador usará oinputFormat como se fossedisplayFormat Alternativamente, se ainputFormat propriedade não estiver definida, o formato de entrada será inferido adisplayFormat partir do caso possa ser analisado como contendo apenas partes numéricas de data-hora.

Mais informações sobre esses casos podem ser encontradas naIgxDateTimeEditor seção de exemplos.

Note

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

Increment and decrement

AsIgxDatePickerComponent exposiçõesincrement edecrement os métodos. Ambos vêm doIgxDateTimeEditorDirective e podem ser usados para incrementar e decrementar uma data específicaDatePart da data atualmente definida.

<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>

Também possui comospinDelta propriedade de entrada que pode ser usada para incrementar ou decrementar uma data específica da data atualmente definida.

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

In Angular Forms

EleIgxDatePickerComponent suporta todas as diretivas dos núcleos FormsModule, NgModel e ReactiveFormsModule (FormControl,FormGroup, etc.). Isso também inclui as funções Forms Validators. Além disso, as propriedades dominValue​maxValue componente e do componente atuam como validadores de formulário.

Você pode ver issoIgxDatePickerComponent em forma reativa 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 oIgxTimePicker são usados juntos, podemos precisar que eles estejam vinculados a um único valor de objeto Data.

Para alcançar isso em formulários baseados em templates, use ongModel para vincular ambos os componentes ao mesmo objeto Data.

Em formas reativas, podemos lidar com ovalueChange evento de cada componente e atualizar o valor do outro.

Calendar Specific settings

EleIgxDatePickerComponent usa oIgxCalendarComponent e você pode modificar algumas de suas configurações por meio das propriedades que o seletor de data expõe. Alguns deles incluemdisplayMonthsCount que permite que mais de um calendário seja exibido quando o selecionador expande,weekStart que determina o dia de início da semana,showWeekNumbers que mostra o número de cada semana do ano e mais.

Internationalization

A localização doIgxDatePickerComponent pode ser controlada por meio de sualocale entrada. Além disso, usando osigxCalendarHeader e osigxCalendarSubheader templates, fornecidos por o,IgxCalendarComponent você pode especificar a aparência do seu cabeçalho e subcabeçalho. Mais informações sobre como usar esses templates 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 datas, precisamos importar oindex arquivo, onde todas as funções de tema e mixins de componentes estão ativos:

@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 Data Picker usa o tema do calendário, então precisamos criar um novo tema que estenda ocalendar-theme. Ao definir o$header-background, o tema calcula automaticamente as cores necessárias para as outras propriedades para garantir um design visualmente equilibrado e acessível.

$custom-datepicker-theme: calendar-theme(
  $header-background: #57a5cd,
);

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

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

Warning

Se o componente estiver usando umEmulated ViewEncapsulation, é necessário parapenetrate esse encapsulamento usando::ng-deep

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

API References

• Componente IgxDatePicker
• Diretiva IgxDateTimeEditor
• Componente IgxCalendar
• Estilos de IgxCalendarComponent
• Estilos IgxOverlay
• Componente do grupo de entrada Igx

Theming Dependencies

• Tema IgxCalendar
• Tema IgxOverlay
• Tema IgxIcon
• Tema IgxButton
• Tema IgxInputGroup
• Tema IgxDropDown

Additional Resources

• Seletor de tempo
• Editor de data e hora
• Seletor de intervalo de datas
• Integração de Formulários Reativos

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

• Ignite UI for Angular Fóruns
• Ignite UI for Angular GitHub