docs: added examples to DatePicker component (#13054)

www/apps/book/public/llms-full.txt

@@ -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
 

www/apps/ui/src/content/docs/components/date-picker.mdx

@@ -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" />

www/apps/ui/src/examples/date-picker-business-hours.tsx

@@ -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>
+  )
+}

www/apps/ui/src/examples/date-picker-controlled.tsx

@@ -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>
+  )
+}

www/apps/ui/src/examples/date-picker-disabled-dates.tsx

@@ -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>
+  )
+}

www/apps/ui/src/examples/date-picker-form.tsx

@@ -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>
+  )
+}

www/apps/ui/src/examples/date-picker-granularity.tsx

@@ -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>
+  )
+}

www/apps/ui/src/examples/date-picker-min-max.tsx

@@ -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>
+  )
+}

www/apps/ui/src/examples/date-picker-with-time.tsx

@@ -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>
+  )
+}

www/apps/ui/src/registries/example-registry.tsx

@@ -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")),