//|:
Installation
Run the following command
pnpm dlx @shadext/cli add datetime-picker
API Reference
Props
The DatetimePicker component accepts the following props:
| prop | type | default value |
|---|---|---|
value | Date | new Date() |
format* | DateTimeFormatDefaults | [
["months", "days", "years"],
["hours", "minutes", "am/pm"],
] |
placeholders | InputPlaceholders | {
months: "MM",
days: "DD",
years: "YYYY",
hours: "HH",
minutes: "MM",
seconds: "SS",
"am/pm": "AM/PM",
} |
dtOptions | Options | {
date: new Date(),
hour12: true,
} |
onChange | Options['onChangeDate'] | console.log |
className | string | undefined |
Usage
import { DatetimePicker } from "@/components/extension/datetime-picker";<DatetimePicker
value={Date.now()}
onChange={(date) => console.log(date)}
format={
(["months", "days", "years"], ["hours", "minutes", "seconds", "am/pm"])
}
/>Example
Form
"use client";
import { DatetimePicker } from "@/components/extension/datetime-picker";
{...}
const DateTimeForm = ()=>{
return (
<Form {...form}>
{...}
<FormField
control={form.control}
name="otp"
render={({ field }) => (
{...}
<DatetimePicker
value={Date.now()}
onChange={(date) => console.log(date)}
format={
(["months", "days", "years"], ["hours", "minutes", "seconds", "am/pm"])
}
/>
{...}
)} />
{...}
</Form>
)
}