RhombusKit

Date Picker

A date picker lets the user choose a calendar date. RhombusKit's <rhombus-date-picker> wraps Material's <mat-datepicker> in the same form-field shell as input and select, but its public value is a plain ISO string (YYYY-MM-DD) so it drops straight into a reactive form — and it routes its colour through the token contract so the calendar re-skins with the active theme.

Example

When to use

  • When the user must pick a single calendar date — a publish date, a deadline, a birthday — and a calendar is clearer than typing.
  • When you want a date field that matches the rest of your RhombusKit form (label, hint, error, sizing) instead of a bare mat-datepicker.

When not to use

  • For a free-form or partial date (e.g. just a year), use an Input with type="date" or plain text.
  • For choosing from a small fixed set of dates, a Select may be simpler.
  • For a start/end range, use the Date Range Picker.

Related components

  • Input — the sibling form-field for free text.
  • Select — pick from a fixed list of options.

Was this page helpful?