d1a1135328
* docs: create a new UI docs project (#13233) * docs: create a new UI docs project * fix installation errors * docs: migrate UI docs content to new project (#13241) * Fix content * added examples for some components * finish adding examples * lint fix * fix build errors * delete empty files * path fixes + refactor * fix build error
74 lines
1.8 KiB
Plaintext
74 lines
1.8 KiB
Plaintext
import { ComponentExample } from "@/components/ComponentExample"
|
|
import { ComponentReference } from "@/components/ComponentReference"
|
|
|
|
export const metadata = {
|
|
title: `Date Picker`,
|
|
}
|
|
|
|
# {metadata.title}
|
|
|
|
A component for rendering date picker inputs with range and presets.
|
|
|
|
In this guide, you'll learn how to use the Date Picker component.
|
|
|
|
<ComponentExample name="date-picker-demo" />
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
import { DatePicker } from "@medusajs/ui"
|
|
```
|
|
|
|
```tsx
|
|
<DatePicker />
|
|
```
|
|
|
|
---
|
|
|
|
## API Reference
|
|
|
|
<ComponentReference mainComponent="DatePicker" />
|
|
|
|
---
|
|
|
|
## Examples
|
|
|
|
### Controlled Date Picker
|
|
|
|
Manage and store the value of the date picker in a state variable for controlled behavior. This is also useful for form integration.
|
|
|
|
<ComponentExample name="date-picker-controlled" />
|
|
|
|
### Date Picker With Time
|
|
|
|
Enable time selection with different granularity levels for precise scheduling.
|
|
|
|
<ComponentExample name="date-picker-with-time" />
|
|
|
|
### Date Picker Min/Max Values
|
|
|
|
Restrict date selection to a specific range by setting minimum and maximum values.
|
|
|
|
In the example below, you can only select dates within the next 30 days. Dates outside the range are disabled.
|
|
|
|
<ComponentExample name="date-picker-min-max" />
|
|
|
|
### Date Picker Disabled Dates
|
|
|
|
Disable specific dates like weekends and holidays to prevent selection of unavailable dates.
|
|
|
|
The example below disables weekends and holidays like Christmas.
|
|
|
|
<ComponentExample name="date-picker-business-hours" />
|
|
|
|
### Date Picker Granularity Options
|
|
|
|
Different levels of time precision from date-only to second-precision selection.
|
|
|
|
<ComponentExample name="date-picker-granularity" />
|
|
|
|
### Date Picker Form Integration
|
|
|
|
The following example shows how to use the date picker in a form, with simulated form submission.
|
|
|
|
<ComponentExample name="date-picker-form" hideFeedback /> |