ComponentsForms
DateTimePicker
Date and time controls for scheduling, publish times, and SLA windows
DateTimePicker extends the existing date picker model with time selection while keeping values as Date objects. Hidden form inputs serialize selected dates as ISO strings.
Import
import { DateTimePicker, DateTimeRangePicker } from '@nim-ui/components';Single Date And Time
Code
<DateTimePicker value={publishAt} onChange={setPublishAt} name="publishAt" />Date And Time Range
Code
<DateTimeRangePicker
value={window}
onChange={setWindow}
fromName="windowStart"
toName="windowEnd"
/>Buddhist Era Scheduling
Display Thai Buddhist Era dates without changing the submitted value. The component still returns a JavaScript Date, and hidden inputs remain ISO strings.
Code
<DateTimePicker
value={publishAt}
onChange={setPublishAt}
calendar="buddhist"
dateFormat="yyyy-MM-dd"
name="publishAt"
/>
// Visible: 2569-06-16 10:00
// Hidden input: 2026-06-16T03:00:00.000Z (depending on local timezone)Operational Form Demo
Props
| Name | Type | Default | Description |
|---|---|---|---|
value | Date | - | Controlled selected date and time |
defaultValue | Date | - | Uncontrolled initial date and time |
onChange | (date: Date | undefined) => void | - | Called with the combined Date value |
dateFormat | 'short' | 'medium' | 'long' | 'full' | 'iso' | string | 'PPP' | Preset or date-fns format for the trigger label |
calendar | 'gregory' | 'buddhist' | 'gregory' | Display years as Gregorian CE or Buddhist Era; values remain Date objects |
locale | Locale | string | - | Display locale. String locales use Intl; date-fns Locale objects also localize the calendar UI |
formatDate | (date: Date) => string | - | Custom display formatter for product-specific policies |
timeStep | number | 15 | Minute interval for time choices |
name | string | - | Hidden input name for ISO form submission |