Edit page

Home

Getting Started

Forms

Typography

Utilities

Visualization Components

DateTimePicker

Input to select a single date and time.

Props

blockedDays

Array<{}>

[]

calendarProps

{}

className

String

[Empty string]

confirmBeforeChange

Bool

false

confirmButtonText

String

"Apply date and time"

locale

String

"en"

name

String

required

onChange

Func

required

rangeEnd

{}

null

rangeStart

{}

moment() .hour(0) .minute(0) .second(0)

textInputProps

{}

timePickerProps

{}

value

{}

null

Examples

Basic DateTimePicker

<State initial={{ value: moment() }}>
  {({ state, setState }) => (
    <DateTimePicker
      value={state.value}
      onChange={(name, value) => console.log(value) || setState({ value })}
      name="my-date"
    />
  )}
</State><State initial={{ value: moment() }}>
  {({ state, setState }) => (
    <DateTimePicker
      value={state.value}
      onChange={(name, value) => console.log(value) || setState({ value })}
      name="my-date"
    />
  )}
</State>

DateTimePicker with specified date range

<State initial={{ value: moment() }}>
  {({ state, setState }) => (
    <DateTimePicker
      value={state.value}
      onChange={(name, value) => console.log(value) || setState({ value })}
      name="my-date"
      rangeStart={moment().subtract(3, 'days')}
      rangeEnd={moment().add(3, 'days')}
    />
  )}
</State><State initial={{ value: moment() }}>
  {({ state, setState }) => (
    <DateTimePicker
      value={state.value}
      onChange={(name, value) => console.log(value) || setState({ value })}
      name="my-date"
      rangeStart={moment().subtract(3, 'days')}
      rangeEnd={moment().add(3, 'days')}
    />
  )}
</State>

DateTimePicker with blocked days

<State initial={{ value: moment() }}>
  {({ state, setState }) => (
    <DateTimePicker
      value={state.value}
      onChange={(name, value) => console.log(value) || setState({ value })}
      name="my-date"
      blockedDays={[moment().add(3, 'days'), moment().add(7, 'days')]}
    />
  )}
</State><State initial={{ value: moment() }}>
  {({ state, setState }) => (
    <DateTimePicker
      value={state.value}
      onChange={(name, value) => console.log(value) || setState({ value })}
      name="my-date"
      blockedDays={[moment().add(3, 'days'), moment().add(7, 'days')]}
    />
  )}
</State>

DateTimePicker with confirm button

<State initial={{ value: moment() }}>
  {({ state, setState }) => (
    <DateTimePicker
      value={state.value}
      onChange={(name, value) => console.log(value) || setState({ value })}
      name="my-date"
      confirmBeforeChange
    />
  )}
</State><State initial={{ value: moment() }}>
  {({ state, setState }) => (
    <DateTimePicker
      value={state.value}
      onChange={(name, value) => console.log(value) || setState({ value })}
      name="my-date"
      confirmBeforeChange
    />
  )}
</State>

DateTimePicker

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Props

Examples

Basic DateTimePicker

DateTimePicker with specified date range

DateTimePicker with blocked days

DateTimePicker with confirm button

Props