Date and time fields are typed in segments: day, month and year in the locale’s order, then hours and minutes on its 12- or 24-hour clock. Each segment is a spin button: type digits and it moves on by itself, or step it with the arrow keys. Paste a whole date, and every segment fills.
The pickers add a calendar in a popover, for one date or a range with presets. Values are plain ISO strings, such as 2026-09-25 or 2026-09-25T09:30, and every field works with Signal Forms, reactive forms and ngModel.
On this site, the examples follow the page’s language: switch it to see the order, separators and digits change.
Date and time fields
Type the digits, or use the arrow keys. A second Backspace goes back a segment. minuteStep sets how far the arrows move the minutes.
Birthday: not set · Alarm: 07:30
Date pickers
The button opens a calendar on the chosen day, and picking closes it. With granularity="minute", the picker takes a time too, and the calendar changes only the date.
Departure: not set · Meeting: 2026-09-26T09:30
A date range
Two fields and a two-month calendar. nuiDateRangePresets() adds common ranges; the value stays null until both ends are set, in order.
Type both dates, pick them in the calendar, or choose a preset.