Installation
Run the following command
pnpm dlx @shadext/cli add smart-datetime-input
API Reference
Props
The SmartDatetimeInput component accepts the following props:
| prop | type | default value |
|---|---|---|
className | string | undefined |
defaultValue | Date | new Date() |
value | Date | new Date() |
onChange | Options['onChangeDate'] | console.log |
placeholder | string | e.g. "tomorrow at 5pm" or "in 2 hours" |
disabled | boolean | ((date: Date) => boolean) | false |
Usage
import { SmartDateTimeInput } from "@/components/extension/smart-date-time-input";<SmartDateTimeInput
name="datetime"
value={Date.now()}
onChange={(e) => setValue(e.target.value)}
placeholder="e.g. tomorrow at 3pm"
disabled={(date) => date < new Date()}
/>Example
Form
"use client";
import { SmartDateTimeInput } from "@/components/extension/smart-datetime-input";
{...}
const SmartDateTimeForm = ()=>{
return (
<Form {...form}>
{...}
<FormField
control={form.control}
name="otp"
render={({ field }) => (
{...}
<SmartDateTimeInput
name="datetime"
value={field.value}
onChange={field.onChange}
placeholder="e.g. tomorrow at 3pm"
disabled={(date) => date < new Date()}
/>
{...}
)} />
{...}
</Form>
)
}