Date Picker

Quick Start

Use a Date Picker to allow users to select a date.

1import { DatePicker } from "@ecos/ui";
2
3<DatePicker />

Variants

Variants provide different visual treatments for text entry.

1<DatePicker
2  variant="outlined"
3/>
4
5<DatePicker
6  variant="filled"
7/>
8
9<DatePicker
10  variant="custom"
11/>

Controlled Usage

Date Picker values can be controlled externally using the value and onValueChange props.

1const [date, setDate] = useState<Date>();
2
3<DatePicker
4  value={date}
5  onValueChange={setDate}
6/>

Date Selection

The default mode allows users to select a single date.

1<DatePicker />

Date Range Selection

Range mode allows users to select a start and end date.

1<DatePicker
2  mode="range"
3/>

Date & Time Selection

Date and time mode combines the calendar with a time selection panel.

1<DatePicker
2  mode="datetime"
3/>

Month Selection

Month mode allows users to select a month and year.

1<DatePicker
2  mode="month"
3/>

Label Text

Use label to provide contextual guidance even after a value has been selected.

1<DatePicker
2  label="Delivery date"
3/>

Placeholder Text

Use placeholder to provide contextual guidance before a value has been selected.

1<DatePicker
2  placeholder="Select delivery date"
3/>

Help Text

Use help text to provide additional context or guidance.

1<DatePicker
2label="Start Date"
3helpText="Please select a date."
4/>

DatePicker States

Use the state prop to communicate validation feedback.

1<DatePicker
2  label="Start Date"
3  state="default"
4/>
5
6<DatePicker
7  label="Start Date"
8  state="error"
9  helpText="Description is required."
10/>
11
12<DatePicker
13  label="Start Date"
14  state="success"
15  defaultValue="Lorem ipsum dolor sit amet."
16  helpText="Description looks good."
17/>

Disabled State

Date Pickers can be disabled when interaction is unavailable.

1<DatePicker disabled />

Date Constraints

Use minDate and maxDate to restrict the selectable date range. Constraints are supported across single, range, datetime, and month modes.

1<DatePicker
2  minDate={new Date(2026, 9, 15)}
3  maxDate={new Date(2026, 11, 31)}
4/>

Date & Time Constraints

Date and time mode respects minimum and maximum date-time values. Dates outside the range cannot be selected, and unavailable times are disabled on boundary dates.

1<DatePicker
2  mode="datetime"
3  minDate={new Date(2026, 0, 10, 9, 0)}
4  maxDate={new Date(2026, 0, 20, 17, 30)}
5/>

Month Constraints

Month mode respects minimum and maximum dates. Months outside the permitted range are disabled and cannot be selected.

1<DatePicker
2  mode="month"
3  minDate={new Date(2026, 2, 1)}
4  maxDate={new Date(2026, 8, 30)}
5/>

Custom Time Intervals

Date and time mode supports configurable time increments.

1<DatePicker
2  mode="datetime"
3  minuteInterval={30}
4/>

Localisation

Set the locale to localise month names, weekday names, and date formatting.

1<DatePicker
2  locale="de"
3  placeholder="TT.MM.JJJJ"
4/>
5
6<DatePicker
7  mode="month"
8  locale="de"
9  placeholder="Monat auswählen"
10/>

API Reference

Visual Reference