docs/components/date-input
Sections
Components
Utilities
Forms
Hooks
Copy Markdown
Segmented input for dates and times.
PreviewCode
mm/dd/yyyy
CLIManual
pnpmbunnpmyarn
pnpm dlx shadcn@latest add @shark/date-input
import { DateInput } from "@/components/ui/date-input";
<DateInput />
Use value and onValueChange to control the date input programmatically.
PreviewCode
mm/dd/yyyy
[]
Use the disabled prop to prevent user interaction.
PreviewCode
mm/dd/yyyy
Use the invalid prop to indicate an error state.
PreviewCode
mm/dd/yyyy
Use the size prop to change the input height.
PreviewCode
mm/dd/yyyy
PreviewCode
mm/dd/yyyy
PreviewCode
mm/dd/yyyy
Use Field components for a labeled date input with helper text.
PreviewCode
Date of birth
mm/dd/yyyy
Use your local date format.
Use the granularity prop to control which date fields are displayed.
PreviewCode
mm/dd/yyyy, ––:–– AM
PreviewCode
––:–– AM
Set selectionMode="range".
PreviewCode
mm/dd/yyyy
Use min and max to restrict the selectable date range.
PreviewCode
mm/dd/yyyy
PreviewCode
mm/dd/yyyy
Use the showClear prop to display a clear button when the date input has a value.
PreviewCode
04/04/2024
PreviewCode
mm/dd/yyyy
mm/dd/yyyy
Root component for the date input.
| Prop | Type | Default |
|---|---|---|
size | `"sm" | "md" |
showClear | boolean | false |
value | DateValue[] | - |
defaultValue | DateValue[] | - |
onValueChange | (details: ValueChangeDetails) => void | - |
selectionMode | `"single" | "range"` |
separator | `string | React.ReactNode` |
granularity | `"day" | "hour" |
hourCycle | `12 | 24` |
formatter | DateFormatter | - |
min | DateValue | - |
max | DateValue | - |
shouldForceLeadingZeros | boolean | true |
disabled | boolean | - |
invalid | boolean | - |
className | string | - |
For additional props and behavior, see the Ark UI documentation.
[
Previous page
Data List ](/docs/components/data-list)[
Next page
Date Picker ](/docs/components/date-picker)
On This Page
InstallationUsageControlledStatesDisabledInvalidSizesSmallMediumLargeExamplesWith FieldGranularityTime OnlyRangeMin and MaxLeading ZerosWith Clear ButtonCustom SeparatorAPI ReferenceDateInput