Edit page

Home

Getting Started

Forms

Typography

Utilities

Visualization Components

DatePicker

Calendar input to select a single date.

Props

alignToRight

Bool

false

blockedDays

Array<{}>

[]

calendarProps

{}

className

String

[Empty string]

confirmBeforeChange

Bool

false

confirmationButtonText

String

"Apply date"

disabled

Bool

false

hideOnChange

Bool

false

locale

Enum

'en'

name

String

required

onChange

Func

required

rangeEnd

{}

null

rangeStart

{}

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

textInputProps

{}

value

{}

null

Examples

Basic DatePicker

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

DatePicker with specified date range

<State initial={{ value: moment() }}>
  {({ state, setState }) => (
    <DatePicker
      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 }) => (
    <DatePicker
      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>

DatePicker with blocked days

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

DatePicker align to right

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

DatePicker with hide on change

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

DatePicker with confirm button

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

DatePicker Disabled

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

DatePicker

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

Props