InputDatePicker

Usage

import { InputDatePicker } from '@acronis-platform/ui-react';

InputDatePicker is the field trigger for a date picker — a labeled box with a trailing calendar icon that displays the formatted selection and opens a consumer-owned calendar popup. It supports a single date or a start–end range via pickerType. Themed by the --ui-input-date-picker-* tokens. className targets the field as a whole (label, box, and message together), so it sizes correctly in a flex/grid ancestor.

This component renders the field; wiring it to an actual calendar popup and formatting the dates is the consumer's responsibility (pass formatted strings as value / startDate / endDate, and toggle open). To build that popup, pair it with Calendar — or, for a ready-made range field, use DateRangePicker, which already composes this trigger with a dual-month range CalendarPanel and its Cancel/Apply footer.

Examples

A single-date field:

<InputDatePicker
  label="Start date"
  pickerType="date"
  placeholder="Select a date"
  value="Jun 25, 2026"
/>

A date-range field:

<InputDatePicker
  label="Reporting period"
  pickerType="dateRange"
  startDate="Jun 1, 2026"
  endDate="Jun 30, 2026"
  separator="–"
/>

Required, error, and open states:

<InputDatePicker label="Date" required placeholder="Select a date" />

<InputDatePicker label="Date" error="Pick a date." />

<InputDatePicker label="Date" open value="Jun 25, 2026" />

API Reference