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
48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
"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>
|
|
)
|
|
}
|