components
InputDate
InputDate combines a text input trigger with a DatePicker popover. When the user clicks or focuses the input, a calendar dropdown appears for date selection. The selected date is formatted and displayed in the input field. This is the recommended form-field variant for date selection. For an inline calendar without a trigger, use DatePicker directly.
Import
import { InputDate } from "@skedulo/breeze-ui-react";Usage Guidance
When to use
- +Select a single date via a text input with calendar popover.
- +Form fields that need date input with validation.
When not to use
- −For always-visible calendars — use DatePicker directly.
- −For date ranges — use DatePickerRange.
- −For time selection — use InputTime.
Examples
Code Samples
Basic InputDate
A date input field that opens a calendar popover on focus.
import { useState } from "react";
import { InputDate } from "@skedulo/breeze-ui-react";
export default function BasicInputDate() {
const [date, setDate] = useState<Date | undefined>();
return <InputDate selected={date} onSelect={setDate} />;
}Guidelines
Do
- ✓Use fromDate/toDate to constrain selectable dates.
- ✓Provide a clear date format hint in the label or placeholder.
- ✓Use isClearable when the date is optional.
Don't
- ✗Don't use InputDate for date-time — combine with InputTime separately.
- ✗Don't leave dates unconstrained when business rules apply.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| selected | Date | — | The currently selected date. |
| onSelect* | (date: Date | undefined) => void | — | Callback when the user selects or clears a date. |
| dateFormat | "MonthDayYear" | "DayMonthYear" | "MonthDayYear" | Display format for the selected date in the input. |
| onBlur | () => void | — | Callback when the input loses focus. |
| openOnFocus | boolean | true | Whether focusing the input opens the date picker. |
| fromDate | Date | — | Earliest selectable date. |
| toDate | Date | — | Latest selectable date. |
| disabled | Date | Date[] | ((date: Date) => boolean) | — | Dates that cannot be selected. |
| isClearable | boolean | false | Show a clear button to deselect the date. |