Visão geral Angular Time Picker

O componente seletor de tempo permite que os usuários insiram ou selecionem partes de tempo de um objeto `Data` de um menu suspenso ou diálogo com spinners, que é então espelhado no campo de entrada. No modo suspenso, que é o padrão, o campo de entrada é editável e os usuários também podem editar o tempo selecionado.

O componente seletor de tempo tem diferentes modelos integrados para exibir um botão de relógio, bem como recursos como validação, formatação de tempo personalizada e muito mais.

Angular Time Picker Example

Em geral, os usuários podem inserir um horário preferencial por meio de entrada de texto ou escolhendo um valor de horário em um menu suspenso do Angular Time Picker. O exemplo básico Angular Time Picker abaixo mostra como os usuários podem inserir facilmente o valor com a ajuda do menu suspenso ou usando o teclado.

Getting Started with Ignite UI for Angular Time Picker

Para começar a usar o componente Ignite UI for Angular Time 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 issoIgxTimePickerModule no seu arquivo app.module.ts.

Note

O IgxTimePicker também depende tanto do BrowserAnimationsModule quanto, opcionalmente, do HammerModule para interações de toque. Eles precisam ser adicionados ao AppModule também.

// app.module.ts

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

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

Alternativamente,16.0.0 você pode importarIgxTimePickerComponent como uma dependência independente ou usar oIGX_TIME_PICKER_DIRECTIVES token para importar o componente e todos os seus componentes e diretivas de suporte.

// home.component.ts

import { FormsModule } from '@angular/forms';
import { IGX_TIME_PICKER_DIRECTIVES } from 'igniteui-angular';
// import { IGX_TABS_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: '<igx-time-picker [(ngModel)]="time"></igx-time-picker>',
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_TIME_PICKER_DIRECTIVES, FormsModule]
    /* or imports: [IgxTimePickerComponent, FormsModule] */
})
export class HomeComponent {
    public time: Date;
}

Agora que você importou o módulo ou diretivas do Ignite UI for Angular Time Picker, pode começar a usar oigx-time-picker componente.

Using the Angular Time Picker

Default

Para adicionar o seletor de tempo em um modelo, use o seguinte código:

<!--meeting.component.html-->
<igx-time-picker></igx-time-picker>

A saída deve ser a mesma da demonstração.

Binding

O Time Picker em Angular pode ser vinculado a um valor de objeto Date ou string apenas de tempo noISO 8601 formato, definindo avalue propriedade oungModel.

Primeiro, crie uma string de tempo noISO 8601 formato:

public time = '09:15:30';

Depois, use parangModel criar uma ligação de dados bidirecional:

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

ou definirvalue a entrada no modelo:

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

Para usá-lo de forma reativa, você precisa definir aformControlName no seletor

<form [formGroup]="form">
    <igx-time-picker formControlName="timePicker"></igx-time-picker>
</form>

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

Projecting components

O componente time picker permite projetar componentes filhos - igual ao caso oIgxInputGroupComponent:igxLabel,IgxHint,igxPrefix,igxSuffix, excluindoIgxInput. Informações mais detalhadas sobre isso podem ser encontradas no tópico Rótulo & Entrada.

Na configuração padrão, um ícone de menu suspenso/diálogo é mostrado como prefixo. Ele pode ser alterado ou redefinido usando oIgxPickerToggleComponent componente. Ele pode ser decorado com qualquer umigxPrefix dos doisigxSuffix, o que definirá sua posição - no início da entrada ou no final, respectivamente.

No exemplo a seguir, adicionamos um rótulo e uma dica personalizados e alteramos a posição padrão do ícone de alternância para ser exibido como um sufixo:

<igx-time-picker [(ngModel)]="date" mode="dialog" [inputFormat]="'hh:mm'">
    <label igxLabel>Home Time </label>
    <igx-picker-toggle igxSuffix>
        <igx-icon>home</igx-icon>
    </igx-picker-toggle>
    <igx-hint>{{date.toLocaleString()}}</igx-hint>
</igx-time-picker>

public date: Date = new Date();

E aqui está nosso modelo de Ignite UI for Angular Time Picker:

Custom action buttons

EleIgxTimePickerComponent suporta personalização de botões de ação. Para isso, envolva os botõesng-template marcados com oigxPickerActions seletor diretivo.

No exemplo abaixo, botões de ação personalizados são adicionados para ações 'CANCELAR', 'CONCLUÍDO' e 'AGORA'.

<!-- sample.component.html -->

<igx-time-picker #picker format="hh:mm" mode="dropdown">
    <ng-template igxTimePickerActions>
        <div class="container action-buttons">
            <button igxButton="flat" (click)="picker.cancelButtonClick()">cancel</button>
            <button igxButton="flat" (click)="picker.okButtonClick()">done</button>
            <button igxButton="flat" (click)="selectNow(picker)">now</button>
        </div>
    </ng-template>
</igx-time-picker>

// sample.component.ts
...
public selectNow(timePicker: IgxTimePickerComponent) {
    timePicker.value = new Date();
    timePicker.close();
}
...

E aí está, um seletor de tempo remodelado com menu suspenso, ações personalizadas e suporte para vinculação bidirecional:

Customizing the toggle and clear icons

ElesIgxTimePickerComponent podem ser configurados comIgxPickerToggleComponent eIgxPickerClearComponent podem ser usados para mudar os ícones de alternar e limpar sem precisar adicionar seus próprios manipuladores de cliques.

 <igx-time-picker>
    <label igxLabel>Select time</label>
    <igx-picker-toggle igxPrefix>
        <igx-icon>snooze</igx-icon>
    </igx-picker-toggle>
    <igx-picker-clear igxSuffix>
        <igx-icon>delete</igx-icon>
    </igx-picker-clear>
</igx-time-picker>

Keyboard Navigation

• Os usuários podem navegar pelas partes de tempo do componente usando o teclado Up e Down as setas ou rolando o campo de entrada e o menu suspenso/diálogo. A navegação na entrada é possível independentemente dominValue ou,maxValue enquanto a navegação no menu suspenso/diálogo será restrita dentro dominValue intervalo e ().maxValue​
• O menu suspenso do seletor de tempo pode ser aberto clicando no ícone de alternância, tecla Espaço ou pressionando as teclas Alt + Seta para baixo. No modo de diálogo, isso pode ser feito clicando na entrada.
• Pressionar a tecla Enter ou clicar com o mouse fora do menu suspenso/caixa de diálogo aplica a seleção e fecha o menu suspenso/caixa de diálogo.
• Pressionar a tecla Escape cancela a seleção e fecha o menu suspenso/caixa de diálogo.
• Ao inserir um novo valor enquanto o menu suspenso estiver fechado, clique fora do seletor de tempo ou pressione Tab para mover o foco para que o valor seja aceito.

Examples

Dialog Mode

O modo seletor de tempo padrão é o modo menu suspenso editável. Para mudar o modo seletor de tempo para modo de diálogo somente leitura, defina amode entrada paradialog:

// timePickerDropdown.component.ts

import { PickerInteractionMode } from 'igniteui-angular';
// import { PickerInteractionMode } from '@infragistics/igniteui-angular'; for licensed package
...
public mode = PickerInteractionMode.Dialog;

<!--timePickerDropdown.component.html-->
<igx-time-picker [mode]="mode"></igx-time-picker>

Ou simplesmente troque omode seletor de tempo assim:

<!--timePickerDropdown.component.html-->
<igx-time-picker mode="dialog"></igx-time-picker>

No modo diálogo, o cabeçalho de diálogo exibe o tempo atualmente selecionado no seletorinput format. Você pode mudar a posição do cabeçalho definindo aheaderOrientation propriedade.

Quando osminValue emaxValue estão definidos, o diálogo mostra apenas o tempo dentro desse intervalo. Veja o exemplo do valor mínimo máximo abaixo, para mais detalhes.

Display and input format

O componente seletor de tempo suporta diferentes formatos de exibição e entrada.

O formato de exibição é o formato do valor quando está em modo de edição e pode ser um dos formatos listados Angular DatePipe. Isso permite que suporte opções de formato predefinidas, comoshortTime elongTime.

O formato de entrada é o formato do valor quando não está no modo de edição e o formato, no qual as partes de tempo são exibidas no menu suspenso/diálogo. AinputFormat propriedade aceita uma string de formato construída usando caracteres suportados pelo DatePipe, por exemplohh:mm:ss, mas não suporta opções de formato predefinidas, comoshortTime elongTime. Se ainputFormat propriedade não estiver definida, ela é padrão parahh:mm tt. 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.

<igx-time-picker
    [(ngModel)]="time"
    [inputFormat]="`hh:mm:ss`"
    [displayFormat]="`shortTime`">
</igx-time-picker>

Note

OIgxTimePicker 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

O seletor de tempo expõe métodos públicosincrement edecrement que aceitam dois parâmetros opcionais: oDatePart a ser modificado e odelta pelo qual será alterado. Se não for especificado, osDatePart padrões paraHours e osdelta padrões paraitemsDelta​

Você pode encontrar um exemplo que ilustra o uso de ambos os métodos em Date Time Editor Directive.

Forms and Validation

O componente time picker suporta todas as diretivas do FormsModule NgModel e ReactiveFormsModule principais (FormControl, FormGroup, etc.). Isso também inclui as funções Forms Validators. Além disso, os valores min e max do componente também atuam como validadores de formulário.

O exemplo de integração de formulários reativos demonstra como usar o igxTimePicker em formulários reativos.

Valor mínimo máximo

Você pode especificarminValue emaxValue restringir a entrada do usuário, nesse caso o menu suspenso/diálogo mostrará o tempo dentro desse intervalo apenas para isso. No modo suspenso, no entanto, ainda é possível que o usuário digite um horário inválido. Você pode lidar com ovalidationFailed evento para notificar o usuário caso isso aconteça.

Note

Os valores mínimos/máximos devem ser um objeto Date ou uma string apenas de tempo noISO 8601 formato:

// app.module.ts

...
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IgxTimePickerModule, IgxToastModule } from 'igniteui-angular';
// import { IgxTimePickerModule, IgxToastModule } from '@infragistics/igniteui-angular'; for licensed package

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

// app.component.ts

public time = '10:00:00';
public min = '09:15:30';
public max = '18:15:30';

@ViewChild('toast', { static: true })
private toast;

public onValidationFailed() {
    this.toast.open();
}

<igx-time-picker
 [(ngModel)]="time"
    [itemsDelta]="{hours:2, minutes:5}"
    [inputFormat]="'hh:mm:ss tt'"
    [headerOrientation]="true"
    [minValue]="min"
    [maxValue]="max"
 (onValidationFailed)="onValidationFailed()">
 <label igxLabel>Meeting Start</label>
</igx-time-picker>

<igx-toast #toast message="Value must be between 09:15:30 AM and 06:15:30 PM"></igx-toast>

O menu suspenso exibe valores dentro do intervalo min/max (09:15:30 AM~06:15:30 PM) com base no delta dos itens. Um toast é adicionado para mostrar uma mensagem quando um horário inválido foi digitado.

Note

Os valores exibidos para cada parte de tempo no menu suspenso/diálogo são calculados com base no delta dos itens que sempre começam de zero. Se ominValue emaxValue não corresponder ao delta dos itens, os valores exibidos começarão ou terminarão a partir do próximo/último valor possível que corresponda ao limiar.

E aí está:

Usando o seletor de data e hora juntos

Em alguns casos, quando eIgxDatePicker o IgxTimePicker são usados juntos, podemos precisar que estejam vinculados a um e mesmo 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.

Estilização

Para começar a estilizar o seletor de tempo, 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';

Seguindo a abordagem mais simples, criamos um novo tema que estende etime-picker-theme aceita parâmetros que estilizam o seletor de tempo.

$my-time-picker-theme: time-picker-theme(
  $text-color: #e4c8a5,
  $hover-text-color: #ecaa53,
  $selected-text-color: #ecaa53,
  $header-background: #ecaa53,
  $background-color: #011627
);

Note

Para estilizar quaisquer componentes adicionais usados como parte do conteúdo da janela do seletor de tempo (como oIgxButton), um tema adicional deve ser criado que seja específico para o respectivo componente e seja colocado apenas no escopo da janela de diálogo (para que não afete o restante da aplicação).

Como a janela do seletor de tempo usa,IgxOverlayService para que nosso tema personalizado alcance a janela do seletor de tempo que queremos estilizar, forneceremos uma saída específica onde a janela de diálogo será colocada no DOM quando estiver visível.

Os itens no nosso seletor de tempo não são descendentes do nosso componentehost— eles estão sendo exibidos na tomada de sobreposição padrão, no final dodocument corpo. A mudança disso é feita utilizando aoutlet propriedade no imóvel nooverlaySettings. Osoutlet controles onde o contêiner de sobreposição deve ser renderizado.

Aqui, podemos passar uma referência ao elemento onde gostaríamos que nosso contêiner estivesse:

<igx-time-picker #picker [overlaySettings]="{ outlet: element }">
</igx-time-picker>

export class TimepickerStylingComponent {
    constructor(public element: ElementRef) {
    }
}

Agora, os itens do seletor de tempo são renderizados corretamente dentro do host do nosso componente, o que significa que nosso tema personalizado entrará em vigor:

Note

Para saber mais sobre as várias opções de fornecer temas para os elementos mostrados ao usar o OIgxOverlayService, você pode dar uma olhada no tópico de estilo Overlay.

 @include css-vars($my-time-picker-theme);

Warning

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

:host {
  ::ng-deep {
    @include css-vars($my-time-picker-theme);
  }
}

Demo

API References

• Componente IgxIcon
• Diretiva de entrada Igx
• Componente do grupo de entrada Igx
• Componente IgxTimePicker
• Estilos de IgxTimePickerComponent
• Serviço IgxOverlay
• Estilos IgxOverlay

Theming Dependencies

• Tema IgxInputGroup
• Tema IgxIcon
• Tema IgxButton
• Tema IgxOverlay

Additional Resources

• Editor de data e hora
• Rótulo & Entrada
• 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