Interface DateTimeProps

Props accepted by the Datetime component.

Every prop is optional; sensible defaults are applied for all of them.

interface DateTimeProps {
    className?: string | string[];
    closeOnClickOutside?: boolean;
    closeOnSelect?: boolean;
    closeOnTab?: boolean;
    dateFormat?: string | boolean;
    displayTimeZone?: string;
    initialValue?: string | Dayjs | Date;
    initialViewDate?: string | Dayjs | Date;
    initialViewMode?: ViewMode;
    input?: boolean;
    inputProps?: InputHTMLAttributes<HTMLInputElement> & Record<string, any>;
    isValidDate?: (date: Dayjs) => boolean;
    locale?: string;
    onBeforeNavigate?: (
        nextView: ViewMode,
        currentView: ViewMode,
        viewDate: Dayjs,
    ) => ViewMode;
    onChange?: (value: string | Dayjs) => void;
    onClose?: (value: string | Dayjs) => void;
    onNavigate?: (view: ViewMode) => void;
    onNavigateBack?: (amount: number, type: string) => void;
    onNavigateForward?: (amount: number, type: string) => void;
    onOpen?: () => void;
    open?: boolean;
    renderDay?: (props: any, date: Dayjs, selectedDate?: Dayjs) => ReactNode;
    renderInput?: (
        props: any,
        openCalendar: () => void,
        closeCalendar: () => void,
    ) => ReactNode;
    renderMonth?: (
        props: any,
        month: number,
        year: number,
        selectedDate?: Dayjs,
    ) => ReactNode;
    renderView?: (view: ViewMode, renderDefault: () => ReactNode) => ReactNode;
    renderYear?: (props: any, year: number, selectedDate?: Dayjs) => ReactNode;
    strictParsing?: boolean;
    timeConstraints?: any;
    timeFormat?: string | boolean;
    updateOnView?: ViewMode;
    utc?: boolean;
    value?: string | Dayjs | Date;
}

Properties

`Optional`className

className?: string | string[]

One or more CSS class names appended to the root <div> wrapper.

Example

<Datetime className="my-picker" />
<Datetime className={['theme-dark', 'compact']} />

`Optional`closeOnClickOutside

closeOnClickOutside?: boolean

When true, clicking outside the picker closes the calendar.

Default Value

true

`Optional`closeOnSelect

closeOnSelect?: boolean

When true, the calendar closes automatically as soon as the user selects a value from the final view (day for a date picker, etc.).

Default Value

false

`Optional`closeOnTab

closeOnTab?: boolean

When true, pressing the Tab key closes the calendar.

Default Value

true

`Optional`dateFormat

dateFormat?: string | boolean

Day.js format string for the date portion (e.g. 'YYYY-MM-DD'). Pass false to hide the date part entirely (time-only picker). Pass true to use the locale default.

Default Value

true (locale default)

Example: Date-only picker

<Datetime timeFormat={false} />

`Optional`displayTimeZone

displayTimeZone?: string

A timezone zone name (e.g. 'America/New_York').

`Optional`initialValue

initialValue?: string | Dayjs | Date

Initial value for the picker in uncontrolled mode. Accepts a dayjs object, a native Date, or a date string.

`Optional`initialViewDate

initialViewDate?: string | Dayjs | Date

The date/time that the calendar initially navigates to (i.e. the month shown when the picker first opens). Defaults to value, initialValue, or today if neither is set.

`Optional`initialViewMode

initialViewMode?: ViewMode

Which calendar view to show first.

Default Value

Determined automatically from dateFormat.

`Optional`input

input?: boolean

When true, the picker is displayed inside an <input> field that opens a floating calendar. When false, the calendar is always visible (static / inline mode).

Default Value

true

`Optional`inputProps

inputProps?: InputHTMLAttributes<HTMLInputElement> & Record<string, any>

Props forwarded directly to the underlying <input> element. Any standard React.InputHTMLAttributes are accepted in addition to arbitrary data attributes.

Example: Custom placeholder

<Datetime inputProps={{ placeholder: 'Pick a date…', id: 'my-date' }} />

`Optional`isValidDate

isValidDate?: (date: Dayjs) => boolean

Return true for dates that should be selectable, false to disable them.

Type Declaration

- (date: Dayjs): boolean
- Parameters
  - date: Dayjs
    The dayjs date being evaluated.
  Returns boolean
  true if the date is valid/selectable.

Example: Disable past dates

<Datetime isValidDate={(d) => d.isSameOrAfter(dayjs(), 'day')} />

`Optional`locale

locale?: string

A dayjs locale identifier string (e.g. 'es', 'fr', 'de'). Applied to month/day names and the default date/time format.

Example

<Datetime locale="es" />

`Optional`onBeforeNavigate

onBeforeNavigate?: (
    nextView: ViewMode,
    currentView: ViewMode,
    viewDate: Dayjs,
) => ViewMode

Called before the view changes, allowing the host to veto or redirect navigation. Return nextView to allow, or a different ViewMode to redirect.

Type Declaration

- (nextView: ViewMode, currentView: ViewMode, viewDate: Dayjs): ViewMode
- Parameters
  - nextView: ViewMode
    The view the user is trying to navigate to.
  - currentView: ViewMode
    The view currently displayed.
  - viewDate: Dayjs
    The dayjs date currently in focus.
  Returns ViewMode
  The ViewMode that should actually be shown.

`Optional`onChange

onChange?: (value: string | Dayjs) => void

Called every time the user changes the selected value, whether by clicking a day/month/year, adjusting the time spinner, or typing in the input field.

Type Declaration

- (value: string | Dayjs): void
- Parameters
  - value: string | Dayjs
    A valid dayjs object when the input is parseable, or the raw string when it cannot be parsed.
  Returns void

Example

<Datetime onChange={(v) => {
  if (dayjs.isDayjs(v)) console.log(v.toISOString());
}} />

`Optional`onClose

onClose?: (value: string | Dayjs) => void

Called when the calendar/time-picker overlay is closed.

Type Declaration

- (value: string | Dayjs): void
- Parameters
  - value: string | Dayjs
    The currently selected value at close time.
  Returns void

`Optional`onNavigate

onNavigate?: (view: ViewMode) => void

Called when the user navigates to a different view (e.g. from days to months).

Type Declaration

- (view: ViewMode): void
- Parameters
  - view: ViewMode
    The new active view mode.
  Returns void

`Optional`onNavigateBack

onNavigateBack?: (amount: number, type: string) => void

Called when the user clicks the "previous" navigation arrow.

Type Declaration

- (amount: number, type: string): void
- Parameters
  - amount: number
    Number of units navigated back.
  - type: string
    Unit of navigation (e.g. 'months', 'years').
  Returns void

`Optional`onNavigateForward

onNavigateForward?: (amount: number, type: string) => void

Called when the user clicks the "next" navigation arrow.

Type Declaration

- (amount: number, type: string): void
- Parameters
  - amount: number
    Number of units navigated forward.
  - type: string
    Unit of navigation (e.g. 'months', 'years').
  Returns void

`Optional`onOpen

onOpen?: () => void

Called when the calendar/time-picker overlay is opened.

`Optional`open

open?: boolean

Programmatically control whether the calendar overlay is open. When set, the component becomes fully controlled — use onOpen/onClose to manage the state externally.

`Optional`renderDay

renderDay?: (props: any, date: Dayjs, selectedDate?: Dayjs) => ReactNode

Custom render function for each day cell in the calendar grid.

Type Declaration

- (props: any, date: Dayjs, selectedDate?: Dayjs): ReactNode
- Parameters
  - props: any
    Props to spread on the <td> element (includes click handlers).
  - date: Dayjs
    The dayjs date for this cell.
  - OptionalselectedDate: Dayjs
    The currently selected date, if any.
  Returns ReactNode

Example: Highlight weekends

<Datetime
  renderDay={(props, date) => (
    <td {...props} style={{ color: date.day() === 0 ? 'red' : undefined }}>
      {date.date()}
    </td>
  )}
/>

`Optional`renderInput

renderInput?: (
    props: any,
    openCalendar: () => void,
    closeCalendar: () => void,
) => ReactNode

Custom render function for the text input.

Type Declaration

- (props: any, openCalendar: () => void, closeCalendar: () => void): ReactNode
- Parameters
  - props: any
    Props to spread on your custom input element.
  - openCalendar: () => void
    Call to open the calendar programmatically.
  - closeCalendar: () => void
    Call to close the calendar programmatically.
  Returns ReactNode

Example: Custom button trigger

<Datetime
  renderInput={(props, open) => (
    <button onClick={open}>{props.value || 'Pick a date'}</button>
  )}
/>

`Optional`renderMonth

renderMonth?: (
    props: any,
    month: number,
    year: number,
    selectedDate?: Dayjs,
) => ReactNode

Custom render function for each month cell in the month-selection view.

Type Declaration

- (props: any, month: number, year: number, selectedDate?: Dayjs): ReactNode
- Parameters
  - props: any
    Props to spread on the <td> element.
  - month: number
    Zero-based month index (0 = January).
  - year: number
    Full four-digit year.
  - OptionalselectedDate: Dayjs
    The currently selected date, if any.
  Returns ReactNode

`Optional`renderView

renderView?: (view: ViewMode, renderDefault: () => ReactNode) => ReactNode

Custom render function that wraps (or replaces) the default calendar view.

Type Declaration

- (view: ViewMode, renderDefault: () => ReactNode): ReactNode
- Parameters
  - view: ViewMode
    The current view mode.
  - renderDefault: () => ReactNode
    Call this to render the built-in view.
  Returns ReactNode
  Any React node.

<Datetime
  renderView={(mode, renderDefault) => (
    <div>
      {renderDefault()}
      <p>Select a date above</p>
    </div>
  )}
/>

`Optional`renderYear

renderYear?: (props: any, year: number, selectedDate?: Dayjs) => ReactNode

Custom render function for each year cell in the year-selection view.

Type Declaration

- (props: any, year: number, selectedDate?: Dayjs): ReactNode
- Parameters
  - props: any
    Props to spread on the <td> element.
  - year: number
    Full four-digit year.
  - OptionalselectedDate: Dayjs
    The currently selected date, if any.
  Returns ReactNode

`Optional`strictParsing

strictParsing?: boolean

When true, only dates that strictly match dateFormat are accepted as valid when typing in the input field.

Default Value

true

`Optional`timeConstraints

timeConstraints?: any

Fine-grained constraints for the time spinner. Each key corresponds to a time unit; each value may contain min, max, and step.

Example: Allow minutes only in 15-minute increments

<Datetime timeConstraints={{ minutes: { min: 0, max: 45, step: 15 } }} />

`Optional`timeFormat

timeFormat?: string | boolean

Day.js format string for the time portion (e.g. 'HH:mm:ss'). Pass false to hide the time part entirely (date-only picker). Pass true to use the locale default.

Default Value

true (locale default)

Example: Date-only picker

<Datetime timeFormat={false} />

`Optional`updateOnView

updateOnView?: ViewMode

Which calendar view triggers an onChange call. By default, determined from dateFormat (e.g. 'days' for a full date format). Set to 'months' to only fire onChange when a month is picked.

`Optional`utc

utc?: boolean

When true, all dates/times are interpreted and displayed in UTC.

Default Value

false

`Optional`value

value?: string | Dayjs | Date

The currently selected date/time value (controlled mode). Accepts a dayjs object, a native Date, or a date string. When provided the picker becomes a controlled component.

Interface DateTimeProps

Index

Properties

Properties

OptionalclassName

Example

OptionalcloseOnClickOutside

Default Value

OptionalcloseOnSelect

Default Value

OptionalcloseOnTab

Default Value

OptionaldateFormat

Default Value

Example: Date-only picker

OptionaldisplayTimeZone

OptionalinitialValue

OptionalinitialViewDate

OptionalinitialViewMode

Default Value

Optionalinput

Default Value

OptionalinputProps

Example: Custom placeholder

OptionalisValidDate

Type Declaration

Parameters

Returns boolean

Example: Disable past dates

Optionallocale

Example

OptionalonBeforeNavigate

Type Declaration

Parameters

Returns ViewMode

OptionalonChange

Type Declaration

Parameters

Returns void

Example

OptionalonClose

Type Declaration

Parameters

Returns void

OptionalonNavigate

Type Declaration

Parameters

Returns void

OptionalonNavigateBack

Type Declaration

Parameters

Returns void

OptionalonNavigateForward

Type Declaration

Parameters

Returns void

OptionalonOpen

Optionalopen

OptionalrenderDay

Type Declaration

Parameters

Returns ReactNode

Example: Highlight weekends

OptionalrenderInput

Type Declaration

Parameters

Returns ReactNode

Example: Custom button trigger

OptionalrenderMonth

Type Declaration

Parameters

Returns ReactNode

OptionalrenderView

Type Declaration

Parameters

Returns ReactNode

Example: Add a footer below the built-in calendar

OptionalrenderYear

Type Declaration

Parameters

`Optional`className

`Optional`closeOnClickOutside

`Optional`closeOnSelect

`Optional`closeOnTab

`Optional`dateFormat

`Optional`displayTimeZone

`Optional`initialValue

`Optional`initialViewDate

`Optional`initialViewMode

`Optional`input

`Optional`inputProps

`Optional`isValidDate

`Optional`locale

`Optional`onBeforeNavigate

`Optional`onChange

`Optional`onClose

`Optional`onNavigate

`Optional`onNavigateBack

`Optional`onNavigateForward

`Optional`onOpen

`Optional`open

`Optional`renderDay

`Optional`renderInput

`Optional`renderMonth

`Optional`renderView

`Optional`renderYear

`Optional`strictParsing

`Optional`timeConstraints

`Optional`timeFormat

`Optional`updateOnView

`Optional`utc

`Optional`value