docs: added examples to DatePicker component (#13054)
This commit is contained in:
Shahed Nasser
GitHub
@@ -82486,6 +82486,260 @@ import { DatePicker } from "@medusajs/ui"
|
||||
when the value is missing or invalid, or mark the field as required
|
||||
or invalid via ARIA.
|
||||
|
||||
## 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.
|
||||
|
||||
```tsx
|
||||
"use client"
|
||||
|
||||
import { DatePicker } from "@medusajs/ui"
|
||||
import { useState } from "react"
|
||||
|
||||
export default function DatePickerControlled() {
|
||||
const [date, setDate] = useState<Date | null>(new Date())
|
||||
|
||||
return (
|
||||
<div className="space-y-4 w-[300px]">
|
||||
<DatePicker
|
||||
value={date}
|
||||
onChange={setDate}
|
||||
aria-label="Select a date"
|
||||
/>
|
||||
<div className="text-ui-fg-subtle text-ui-body-small">
|
||||
Selected date: {date ? date.toLocaleDateString() : "None"}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
### Date Picker With Time
|
||||
|
||||
Enable time selection with different granularity levels for precise scheduling.
|
||||
|
||||
```tsx
|
||||
"use client"
|
||||
|
||||
import { DatePicker } from "@medusajs/ui"
|
||||
|
||||
export default function DatePickerWithTime() {
|
||||
return (
|
||||
<div className="w-[300px]">
|
||||
<DatePicker
|
||||
granularity="minute"
|
||||
defaultValue={new Date()}
|
||||
aria-label="Select date and time"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
### 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.
|
||||
|
||||
```tsx
|
||||
"use client"
|
||||
|
||||
import { DatePicker } from "@medusajs/ui"
|
||||
|
||||
export default function DatePickerMinMax() {
|
||||
const today = new Date()
|
||||
const maxDate = new Date()
|
||||
maxDate.setDate(today.getDate() + 30) // 30 days from today
|
||||
|
||||
return (
|
||||
<div className="w-[300px]">
|
||||
<DatePicker
|
||||
minValue={today}
|
||||
maxValue={maxDate}
|
||||
aria-label="Select a date within the next 30 days"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
### Disabled Dates
|
||||
|
||||
Disable specific dates like weekends and holidays to prevent selection of unavailable dates.
|
||||
|
||||
The example below disables weekends and holidays like Christmas.
|
||||
|
||||
```tsx
|
||||
"use client"
|
||||
|
||||
import { DatePicker } from "@medusajs/ui"
|
||||
|
||||
export default function DatePickerBusinessHours() {
|
||||
return (
|
||||
<div className="w-[300px]">
|
||||
<DatePicker
|
||||
granularity="hour"
|
||||
defaultValue={new Date()}
|
||||
aria-label="Select date and hour for business scheduling"
|
||||
isDateUnavailable={(date) => {
|
||||
// Disable weekends and holidays
|
||||
const day = date.getDay()
|
||||
const isWeekend = day === 0 || day === 6
|
||||
|
||||
// Example: Disable specific holiday (Christmas)
|
||||
const isChristmas = date.getMonth() === 11 && date.getDate() === 25
|
||||
|
||||
return isWeekend || isChristmas
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
### Granularity Options
|
||||
|
||||
Different levels of time precision from date-only to second-precision selection.
|
||||
|
||||
```tsx
|
||||
"use client"
|
||||
|
||||
import { DatePicker } from "@medusajs/ui"
|
||||
|
||||
export default function DatePickerGranularity() {
|
||||
const defaultDate = new Date()
|
||||
|
||||
return (
|
||||
<div className="space-y-6 max-w-md">
|
||||
<div className="space-y-2">
|
||||
<div className="text-ui-fg-base text-ui-body-small font-medium">Date Only</div>
|
||||
<DatePicker
|
||||
granularity="day"
|
||||
defaultValue={defaultDate}
|
||||
aria-label="Select day only"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="text-ui-fg-base text-ui-body-small font-medium">Date and Time with Hour Precision</div>
|
||||
<DatePicker
|
||||
granularity="hour"
|
||||
defaultValue={defaultDate}
|
||||
aria-label="Select date and hour"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="text-ui-fg-base text-ui-body-small font-medium">Date and Time with Minute Precision</div>
|
||||
<DatePicker
|
||||
granularity="minute"
|
||||
defaultValue={defaultDate}
|
||||
aria-label="Select date and time with minutes"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="text-ui-fg-base text-ui-body-small font-medium">Date and Time with Second Precision</div>
|
||||
<DatePicker
|
||||
granularity="second"
|
||||
defaultValue={defaultDate}
|
||||
aria-label="Select date and time with seconds"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
### Form Integration
|
||||
|
||||
The following example shows how to use the date picker in a form, with simulated form submission.
|
||||
|
||||
```tsx
|
||||
"use client"
|
||||
|
||||
import { DatePicker, Button, Label } from "@medusajs/ui"
|
||||
import { useState } from "react"
|
||||
|
||||
export default function DatePickerForm() {
|
||||
const [eventDate, setEventDate] = useState<Date | null>(null)
|
||||
const [reminderDate, setReminderDate] = useState<Date | null>(null)
|
||||
const [submitted, setSubmitted] = useState(false)
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setSubmitted(true)
|
||||
// Here you would typically send data to your API
|
||||
setTimeout(() => setSubmitted(false), 5000)
|
||||
}
|
||||
|
||||
const isFormValid = eventDate && reminderDate
|
||||
|
||||
return (
|
||||
<div className="p-6 max-w-md border border-ui-border-base rounded-lg bg-ui-bg-base">
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-ui-fg-base font-medium">Schedule Event</h3>
|
||||
<p className="text-ui-fg-subtle text-ui-body-small">
|
||||
Set up your event and reminder dates
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="event-date">Event Date & Time</Label>
|
||||
<DatePicker
|
||||
id="event-date"
|
||||
value={eventDate}
|
||||
onChange={setEventDate}
|
||||
minValue={new Date()}
|
||||
aria-label="Select event date and time"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="reminder-date">Reminder Date</Label>
|
||||
<DatePicker
|
||||
id="reminder-date"
|
||||
value={reminderDate}
|
||||
onChange={setReminderDate}
|
||||
minValue={new Date()}
|
||||
maxValue={eventDate || undefined}
|
||||
aria-label="Select reminder date"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={!isFormValid || submitted}
|
||||
className="w-full"
|
||||
>
|
||||
{submitted ? "Event Scheduled!" : "Schedule Event"}
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
{submitted && (
|
||||
<div className="mt-4 text-ui-fg-subtle text-ui-body-small">
|
||||
Event scheduled for {eventDate?.toLocaleString()} with a reminder on {reminderDate?.toLocaleDateString()}.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
|
||||
# Drawer
|
||||
|
||||
|
||||
@@ -23,3 +23,47 @@ import { DatePicker } from "@medusajs/ui"
|
||||
---
|
||||
|
||||
<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" />
|
||||
|
||||
### 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" />
|
||||
|
||||
### 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" />
|
||||
|
||||
### Granularity Options
|
||||
|
||||
Different levels of time precision from date-only to second-precision selection.
|
||||
|
||||
<ComponentExample name="date-picker-granularity" />
|
||||
|
||||
### Form Integration
|
||||
|
||||
The following example shows how to use the date picker in a form, with simulated form submission.
|
||||
|
||||
<ComponentExample name="date-picker-form" />
|
||||
|
||||
25
www/apps/ui/src/examples/date-picker-business-hours.tsx
Normal file
25
www/apps/ui/src/examples/date-picker-business-hours.tsx
Normal file
@@ -0,0 +1,25 @@
|
||||
"use client"
|
||||
|
||||
import { DatePicker } from "@medusajs/ui"
|
||||
|
||||
export default function DatePickerBusinessHours() {
|
||||
return (
|
||||
<div className="w-[300px]">
|
||||
<DatePicker
|
||||
granularity="hour"
|
||||
defaultValue={new Date()}
|
||||
aria-label="Select date and hour for business scheduling"
|
||||
isDateUnavailable={(date) => {
|
||||
// Disable weekends and holidays
|
||||
const day = date.getDay()
|
||||
const isWeekend = day === 0 || day === 6
|
||||
|
||||
// Example: Disable specific holiday (Christmas)
|
||||
const isChristmas = date.getMonth() === 11 && date.getDate() === 25
|
||||
|
||||
return isWeekend || isChristmas
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
21
www/apps/ui/src/examples/date-picker-controlled.tsx
Normal file
21
www/apps/ui/src/examples/date-picker-controlled.tsx
Normal file
@@ -0,0 +1,21 @@
|
||||
"use client"
|
||||
|
||||
import { DatePicker } from "@medusajs/ui"
|
||||
import { useState } from "react"
|
||||
|
||||
export default function DatePickerControlled() {
|
||||
const [date, setDate] = useState<Date | null>(new Date())
|
||||
|
||||
return (
|
||||
<div className="space-y-4 w-[300px]">
|
||||
<DatePicker
|
||||
value={date}
|
||||
onChange={setDate}
|
||||
aria-label="Select a date"
|
||||
/>
|
||||
<div className="text-ui-fg-subtle text-ui-body-small">
|
||||
Selected date: {date ? date.toLocaleDateString() : "None"}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
20
www/apps/ui/src/examples/date-picker-disabled-dates.tsx
Normal file
20
www/apps/ui/src/examples/date-picker-disabled-dates.tsx
Normal file
@@ -0,0 +1,20 @@
|
||||
"use client"
|
||||
|
||||
import { DatePicker } from "@medusajs/ui"
|
||||
|
||||
export default function DatePickerDisabledDates() {
|
||||
// Disable weekends (Saturday and Sunday)
|
||||
const isWeekend = (date: Date) => {
|
||||
const day = date.getDay()
|
||||
return day === 0 || day === 6 // Sunday = 0, Saturday = 6
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-[300px]">
|
||||
<DatePicker
|
||||
isDateUnavailable={isWeekend}
|
||||
aria-label="Select a weekday (weekends disabled)"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
71
www/apps/ui/src/examples/date-picker-form.tsx
Normal file
71
www/apps/ui/src/examples/date-picker-form.tsx
Normal file
@@ -0,0 +1,71 @@
|
||||
"use client"
|
||||
|
||||
import { DatePicker, Button, Label } from "@medusajs/ui"
|
||||
import { useState } from "react"
|
||||
|
||||
export default function DatePickerForm() {
|
||||
const [eventDate, setEventDate] = useState<Date | null>(null)
|
||||
const [reminderDate, setReminderDate] = useState<Date | null>(null)
|
||||
const [submitted, setSubmitted] = useState(false)
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setSubmitted(true)
|
||||
// Here you would typically send data to your API
|
||||
setTimeout(() => setSubmitted(false), 5000)
|
||||
}
|
||||
|
||||
const isFormValid = eventDate && reminderDate
|
||||
|
||||
return (
|
||||
<div className="p-6 max-w-md border border-ui-border-base rounded-lg bg-ui-bg-base">
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-ui-fg-base font-medium">Schedule Event</h3>
|
||||
<p className="text-ui-fg-subtle text-ui-body-small">
|
||||
Set up your event and reminder dates
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="event-date">Event Date & Time</Label>
|
||||
<DatePicker
|
||||
id="event-date"
|
||||
value={eventDate}
|
||||
onChange={setEventDate}
|
||||
minValue={new Date()}
|
||||
aria-label="Select event date and time"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="reminder-date">Reminder Date</Label>
|
||||
<DatePicker
|
||||
id="reminder-date"
|
||||
value={reminderDate}
|
||||
onChange={setReminderDate}
|
||||
minValue={new Date()}
|
||||
maxValue={eventDate || undefined}
|
||||
aria-label="Select reminder date"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={!isFormValid || submitted}
|
||||
className="w-full"
|
||||
>
|
||||
{submitted ? "Event Scheduled!" : "Schedule Event"}
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
{submitted && (
|
||||
<div className="mt-4 text-ui-fg-subtle text-ui-body-small">
|
||||
Event scheduled for {eventDate?.toLocaleString()} with a reminder on {reminderDate?.toLocaleDateString()}.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
47
www/apps/ui/src/examples/date-picker-granularity.tsx
Normal file
47
www/apps/ui/src/examples/date-picker-granularity.tsx
Normal file
@@ -0,0 +1,47 @@
|
||||
"use client"
|
||||
|
||||
import { DatePicker } from "@medusajs/ui"
|
||||
|
||||
export default function DatePickerGranularity() {
|
||||
const defaultDate = new Date()
|
||||
|
||||
return (
|
||||
<div className="space-y-6 max-w-md">
|
||||
<div className="space-y-2">
|
||||
<div className="text-ui-fg-base text-ui-body-small font-medium">Date Only</div>
|
||||
<DatePicker
|
||||
granularity="day"
|
||||
defaultValue={defaultDate}
|
||||
aria-label="Select day only"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="text-ui-fg-base text-ui-body-small font-medium">Date and Time with Hour Precision</div>
|
||||
<DatePicker
|
||||
granularity="hour"
|
||||
defaultValue={defaultDate}
|
||||
aria-label="Select date and hour"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="text-ui-fg-base text-ui-body-small font-medium">Date and Time with Minute Precision</div>
|
||||
<DatePicker
|
||||
granularity="minute"
|
||||
defaultValue={defaultDate}
|
||||
aria-label="Select date and time with minutes"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="text-ui-fg-base text-ui-body-small font-medium">Date and Time with Second Precision</div>
|
||||
<DatePicker
|
||||
granularity="second"
|
||||
defaultValue={defaultDate}
|
||||
aria-label="Select date and time with seconds"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
19
www/apps/ui/src/examples/date-picker-min-max.tsx
Normal file
19
www/apps/ui/src/examples/date-picker-min-max.tsx
Normal file
@@ -0,0 +1,19 @@
|
||||
"use client"
|
||||
|
||||
import { DatePicker } from "@medusajs/ui"
|
||||
|
||||
export default function DatePickerMinMax() {
|
||||
const today = new Date()
|
||||
const maxDate = new Date()
|
||||
maxDate.setDate(today.getDate() + 30) // 30 days from today
|
||||
|
||||
return (
|
||||
<div className="w-[300px]">
|
||||
<DatePicker
|
||||
minValue={today}
|
||||
maxValue={maxDate}
|
||||
aria-label="Select a date within the next 30 days"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
15
www/apps/ui/src/examples/date-picker-with-time.tsx
Normal file
15
www/apps/ui/src/examples/date-picker-with-time.tsx
Normal file
@@ -0,0 +1,15 @@
|
||||
"use client"
|
||||
|
||||
import { DatePicker } from "@medusajs/ui"
|
||||
|
||||
export default function DatePickerWithTime() {
|
||||
return (
|
||||
<div className="w-[300px]">
|
||||
<DatePicker
|
||||
granularity="minute"
|
||||
defaultValue={new Date()}
|
||||
aria-label="Select date and time"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -269,6 +269,44 @@ export const ExampleRegistry: ExampleRegistryType = {
|
||||
component: React.lazy(async () => import("@/examples/date-picker-demo")),
|
||||
file: "src/examples/date-picker-demo.tsx",
|
||||
},
|
||||
"date-picker-controlled": {
|
||||
name: "date-picker-controlled",
|
||||
component: React.lazy(
|
||||
async () => import("@/examples/date-picker-controlled")
|
||||
),
|
||||
file: "src/examples/date-picker-controlled.tsx",
|
||||
},
|
||||
"date-picker-with-time": {
|
||||
name: "date-picker-with-time",
|
||||
component: React.lazy(
|
||||
async () => import("@/examples/date-picker-with-time")
|
||||
),
|
||||
file: "src/examples/date-picker-with-time.tsx",
|
||||
},
|
||||
"date-picker-min-max": {
|
||||
name: "date-picker-min-max",
|
||||
component: React.lazy(async () => import("@/examples/date-picker-min-max")),
|
||||
file: "src/examples/date-picker-min-max.tsx",
|
||||
},
|
||||
"date-picker-business-hours": {
|
||||
name: "date-picker-business-hours",
|
||||
component: React.lazy(
|
||||
async () => import("@/examples/date-picker-business-hours")
|
||||
),
|
||||
file: "src/examples/date-picker-business-hours.tsx",
|
||||
},
|
||||
"date-picker-granularity": {
|
||||
name: "date-picker-granularity",
|
||||
component: React.lazy(
|
||||
async () => import("@/examples/date-picker-granularity")
|
||||
),
|
||||
file: "src/examples/date-picker-granularity.tsx",
|
||||
},
|
||||
"date-picker-form": {
|
||||
name: "date-picker-form",
|
||||
component: React.lazy(async () => import("@/examples/date-picker-form")),
|
||||
file: "src/examples/date-picker-form.tsx",
|
||||
},
|
||||
"drawer-demo": {
|
||||
name: "drawer-demo",
|
||||
component: React.lazy(async () => import("@/examples/drawer-demo")),
|
||||
|
||||
Reference in New Issue
Block a user