Components
- Accordion
- Action Bar
- Alert Dialog
- Alert
- Announcement
- Aspect Ratio
- Autocomplete
- Avatar
- Badge
- Bottom Navigation
- Breadcrumb
- Button Group
- Button
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Circular Progress
- Circular Slider
- Clipboard
- Collapsible
- Color Picker
- Combobox
- Command
- Context Menu
- Data List
- Date InputNew
- Date Picker
- Dialog
- DrawerUpdated
- Editable
- Field
- File Upload
- FloatUpdated
- Floating Panel
- Frame
- Hint
- Hover Card
- Image Cropper
- Input Group
- Input OTP
- Input
- Item
- Kbd
- Link Overlay
- Listbox
- Marquee
- Menu
- Native Select
- Number Input
- Pagination
- Password Input
- Popover
- Progress
- Prose
- QR Code
- Radio Group
- Rating
- Resizable
- Scroll Area
- Segment Group
- Select
- Separator
- Sheet
- Sidebar
- Signature Pad
- Skeleton
- Skip Nav
- Slider
- Spinner
- StatusUpdated
- Steps
- Switch
- Table
- Tabs
- Tags Input
- Textarea
- Timer
- Toast
- Toggle Group
- Toggle Tooltip
- Toggle
- Tooltip
- Tour
- Tree View
Hooks
mm/dd/yyyy
Installation#
pnpm dlx shadcn@latest add @shark/date-input
Usage#
import { DateInput } from "@/components/ui/date-input";
<DateInput />
Controlled#
Use value and onValueChange to control the date input programmatically.
mm/dd/yyyy
[]
States#
Disabled#
Use the disabled prop to prevent user interaction.
mm/dd/yyyy
Invalid#
Use the invalid prop to indicate an error state.
mm/dd/yyyy
Sizes#
Use the size prop to change the input height.
Small#
mm/dd/yyyy
Medium#
mm/dd/yyyy
Large#
mm/dd/yyyy
Examples#
With Field#
Use Field components for a labeled date input with helper text.
mm/dd/yyyy
Use your local date format.
Granularity#
Use the granularity prop to control which date fields are displayed.
mm/dd/yyyy, ––:–– AM
Time Only#
––:–– AM
Range#
Set selectionMode="range".
mm/dd/yyyy
-mm/dd/yyyy
Min and Max#
Use min and max to restrict the selectable date range.
mm/dd/yyyy
Leading Zeros#
mm/dd/yyyy
With Clear Button#
Use the showClear prop to display a clear button when the date input has a value.
04/04/2024
Custom Separator#
mm/dd/yyyy
mm/dd/yyyy
API Reference#
DateInput#
Root component for the date input.
| Prop | Type | Default |
|---|---|---|
size | "sm" | "md" | "lg" | "md" |
showClear | boolean | false |
value | DateValue[] | - |
defaultValue | DateValue[] | - |
onValueChange | (details: ValueChangeDetails) => void | - |
selectionMode | "single" | "range" | "single" |
separator | string | React.ReactNode | "-" |
granularity | "day" | "hour" | "minute" | "second" | "day" |
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.