Component

Date picker

A trigger — an input or a button — that opens a calendar in a popover. It syncs the calendar with a formatted, parseable input, and inherits every calendar feature: single, range, min/max, and more.

Input trigger

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));
}

Button trigger

Format & typed parsing

Range & constraints

API reference

hb-date-picker

Property	Description	Type	Default
[hbCloseOnSelect]	Close the popover once a complete value is chosen.	boolean	true
(hbOpenChange)	Emits true when the popover opens and false when it closes.	boolean	—
[hbDatePickerTrigger]	Projected element that opens the picker (an input or a button).	slot	—
hb-calendar (projected)	The calendar shown in the popover; all its inputs apply.	slot	—

input[hbDatePickerInput]

Property	Description	Type	Default
[hbFormat]	date-fns format used to display the selected date.	string	'PP'
[hbParseFormats]	date-fns formats accepted when the user types a date.	string[]	[]