The DatePicker component provides an interactive calendar interface for selecting single dates or date ranges. It renders a text input that triggers a calendar popup upon interaction, supporting both keyboard and mouse input.
Key Features
- Flexible modes: Supports single date selection (default) or date range selection.
- Format customization: Supports various date formats (e.g.,
MM/dd/yyyy, yyyy-MM-dd). - Date restrictions: Allows setting minimum/maximum dates and disabling specific dates.
- Localization: Configurable first day of the week and visibility of week numbers.
Data Model
The component uses the following context variable for its value:
value:- In single mode: returns a
string. - In range mode: returns an object
{ from, to }.
// Example of expected value shapes
// Single mode:
const value = "2023-10-27";
// Range mode:
const value = { from: "2023-10-01", to: "2023-10-07" };
