Date Picker
A date picker component with range and presets.
Was this example helpful?
Usage
import { DatePicker } from "@medusajs/ui"
<DatePicker />
API Reference
This component is based on the Calendar component and Radix UI Popover.
| Prop | Type | Default |
|---|---|---|
fromYear | number | - |
toYear | number | - |
fromMonth | Date | - |
toMonth | Date | - |
fromDay | Date | - |
toDay | Date | - |
fromDate | Date | - |
toDate | Date | - |
locale | Locale | - |
className | string | - |
disabled | boolean | - |
required | boolean | - |
placeholder | string | - |
size | "small"| "base" | - |
showTimePicker | boolean | - |
translations | object | - |
mode | "single"| "range" | "single" |
defaultValue | Date| DateRange | - |
onChange | function| function | - |
presets | DatePreset[]| DateRangePreset[] | - |
value | Date| DateRange | - |
Was this section helpful?
Examples
Single
Was this example helpful?
Single with time
Was this example helpful?
Single with presets
Was this example helpful?
Single with presets and time
Was this example helpful?
Range
Was this example helpful?
Range with time
Was this example helpful?
Range with presets
Was this example helpful?
Range with presets and time
Was this example helpful?
Changing the Locale
Changing the locale requires installing the date-fns library.
Was this example helpful?