Componente

Date picker

Um gatilho — um input ou um botão — que abre um calendário em um popover. Sincroniza o calendário com um input formatado e parseável, e herda todos os recursos do calendário: único, intervalo, min/max e mais.

Gatilho de input

import { ChangeDetectionStrategy, Component, signal } from '@angular/core';

import {
  HbCalendarImports,
  HbDatePickerComponent,
  HbDatePickerInputDirective,
  HbInputDirective,
  type HbCalendarValue,
} from '@herbst/ui';

@Component({
  selector: 'hb-demo-date-picker-input',
  imports: [HbDatePickerComponent, HbDatePickerInputDirective, HbInputDirective, HbCalendarImports],
  template: `
    <hb-date-picker>
      <input
        hbDatePickerTrigger
        hbDatePickerInput
        hb-input
        class="w-56"
        placeholder="Pick a date"
      />
      <hb-calendar [hbValue]="date()" (hbValueChange)="date.set($event)" />
    </hb-date-picker>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoDatePickerInputComponent {
  protected readonly date = signal<HbCalendarValue>(new Date(2026, 6, 13));
}

Gatilho de botão

Formato e parsing digitado

Intervalo e restrições

Referência de API

hb-date-picker

Propriedade	Descrição	Tipo	Padrão
[hbCloseOnSelect]	Fecha o popover quando um valor completo é escolhido.	boolean	true
(hbOpenChange)	Emite true ao abrir o popover e false ao fechar.	boolean	—
[hbDatePickerTrigger]	Elemento projetado que abre o picker (um input ou um botão).	slot	—
hb-calendar (projected)	O calendário exibido no popover; todos os seus inputs se aplicam.	slot	—

input[hbDatePickerInput]

Propriedade	Descrição	Tipo	Padrão
[hbFormat]	Formato do date-fns usado para exibir a data selecionada.	string	'PP'
[hbParseFormats]	Formatos do date-fns aceitos quando o usuário digita uma data.	string[]	[]