DateTime Picker

bs-datetime-picker couples a calendar popup and a time-slot popup behind a single display input. The selected value is exposed via the [(value)] two-way binding (or any reactive-forms control), and options such as [min], [max], [disableDateFn], [step], and [hour12] fine-tune the popups.

Basic usage

Keyboard shortcuts
  • Tab — moves between display input → date trigger → time trigger
  • / Enter / Space on a trigger — open its popup
  • Esc — close the active popup (focus returns to trigger)
  • Calendar popup: ±1 day · ±1 week · Home / End week edges · PageUp / PageDown ±1 month · Ctrl+PageUp/PageDown ±1 year · Enter / Space selects
  • Time popup: ±1 slot · Home / End first / last · PageUp / PageDown ±1 hour · Enter / Space selects + closes

Minimal

Selected:

Reactive form

FormControl.value:
FormControl.valid: true · FormControl.dirty: false

min / max bounds

Bounded to all of 2026.

Selected:

disableDateFn (weekends disabled)

Selected:

Custom step (30 minutes)

Selected:

hour12 mode


Current mode: "auto"