DateInput

Updated: May 12, 2025

The DateInput component provides an enhanced date picker that combines an input field with a dropdown calendar interface. It allows users to easily select dates with optional time selection.

DateInput

const [date, setDate] = useState<Date | undefined>(new Date());

const handleDateChange = (newDate: Date) => {
  setDate(newDate);
};

<DateInput
  id="date-input-example"
  label="Select Date"
  value={date}
  onChange={handleDateChange}
/>

Time picker

Enable time selection by setting the timePicker prop to true.

TimePicker

const [dateTime, setDateTime] = useState<Date | undefined>(new Date());

const handleDateTimeChange = (newDateTime: Date) => {
setDateTime(newDateTime);
};

<DateInput
id="date-time-input-example"
label="Select Date & Time"
value={dateTime}
onChange={handleDateTimeChange}
timePicker
/>

Features

Calendar Interface: Visual calendar for easy date selection
Time Selection: Optional time picker for selecting hours and minutes
Formatted Display: Displays selected date in a readable format
Dropdown Integration: Uses DropdownWrapper for a clean UI experience

API reference

Prop	Type	Default
idrequired	string	—
label	string	—
placeholder	string	—
value	Date	—
onChange	(date: Date) => void	—
minHeight Minimum height of the calendar popover.	number	—
className	string	—
style	React.CSSProperties	—
timePicker	boolean	false
minDate Earliest date the calendar allows.	Date	—
maxDate Latest date the calendar allows.	Date	—
…and every InputProps prop	inherited	—

Form ControlsColorInput

Form ControlsDatePicker

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club