DateInput – Once UI

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

size="xxs" draws a 32px field, the height of a size="s" Button, for a date filter in a toolbar.

Toolbar size

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

<DateInput
  id="date"
  placeholder="Select date"
  size="xxs"
  value={date}
  onChange={setDate}
/>

API reference

	Type	Default
idrequired	string	—
label	string	—
placeholder	string	—
value	Date	—
defaultValue	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	—
locale Locale for the field's date and the calendar's names, such as "de". US English when left out.	string	—
labels The calendar's own words, for a translated interface: the same { previousMonth, nextMonth, month, year, ... } as DatePicker's labels. Omitted fields stay English.	DatePickerLabels	—
…and every InputProps prop	inherited	—