Datepicker attached to the input

Customize UI

Description

DatepickerInput component renders Datepicker, attached to the provided input (DOM node or React component). It contains:

Datepicker component without the header.
Input which is displayed to user.
PopoverWrapper to display Datepicker when user clicks (or makes any other action) inside Input, when mode prop is set to popover.
ModalWrapper to display Datepicker when user clicks (or makes any other action) inside Input, when mode prop is set to modal.

Click inside input

<div>
  <div>Click inside input</div>
  <DatepickerInput
    onDateSet={date => {
      console.log('date set', date)
    }}
  />
</div>

<div>
  <div>Click inside input</div>
  <DatepickerInput
    onDateSet={date => {
      console.log('date set', date)
    }}
  />
</div>

Props

onDateSet

func

required

mode

'popover' │ 'modal'

'popover'

hideOnSelect

bool

true

renderInputAs

elementType

Input

renderDatepickerAs

elementType

Datepicker

wrapPopoverWith

elementType

PopoverWrapper

popoverProvider

elementType

PopoverProvider

modalProvider

elementType

ModalProvider

wrapModalWith

elementType

ModalWrapper

formatPattern

string

"MM/dd/yyyy"

datePickerProps

{ "onDateSet": "Custom", "theme": "Custom", "dateFnsLocale": "Custom" }

{}

datePickerDefaultProps

{ "initialDate": "Class(Date)", "today": "Class(Date)", "minPrecision": "string" }

{ initialDate: new Date(2020, 0, 8), today: new Date(), minPrecision: 'day', }

theme

{}

dateFnsLocale

{}

Display mode

Position of popover is calculated dynamically to fit inside the viewport.

Click inside input

<div>
  <div>Click inside input</div>
  <DatepickerInput
    mode="popover"
    onDateSet={date => {
      console.log('date set', date)
    }}
  />
</div>

<div>
  <div>Click inside input</div>
  <DatepickerInput
    mode="popover"
    onDateSet={date => {
      console.log('date set', date)
    }}
  />
</div>

Renders Datepicker as a modal window. More convenient for a small screen devices.

Click inside input

<div>
  <div>Click inside input</div>
  <DatepickerInput
    mode="modal"
    onDateSet={date => {
      console.log('date set', date)
    }}
  />
</div>

<div>
  <div>Click inside input</div>
  <DatepickerInput
    mode="modal"
    onDateSet={date => {
      console.log('date set', date)
    }}
  />
</div>

Set attached Datepicker props via datePickerProps property. Same validation rules apply as for Datepicker itself, except onDateSet callback, theme and dateFnsLocale, which should be defined in the upper scope.

Click inside input

() => {
  const theme = {
    '--bgColor': '#fffff0',
    '--headerBgColor': 'purple',
    '--entrySelectedColor': 'purple',
  }
  return (
    <div>
      <div>Click inside input</div>
      <DatepickerInput
        datePickerProps={{ minPrecision: 'month' }}
        dateFnsLocale={locale}
        theme={theme}
        onDateSet={date => {
          console.log('date set', date)
        }}
      />
    </div>
  )
}

() => {
  const theme = {
    '--bgColor': '#fffff0',
    '--headerBgColor': 'purple',
    '--entrySelectedColor': 'purple',
  }
  return (
    <div>
      <div>Click inside input</div>
      <DatepickerInput
        datePickerProps={{ minPrecision: 'month' }}
        dateFnsLocale={locale}
        theme={theme}
        onDateSet={date => {
          console.log('date set', date)
        }}
      />
    </div>
  )
}

`hideOnSelect`

Defines Datepicker behavior after user clicks on the date entry.

Click inside input

<div>
  <div>Click inside input</div>
  <DatepickerInput
    hideOnSelect={false}
    onDateSet={date => {
      console.log('date set', date)
    }}
  />
</div>

<div>
  <div>Click inside input</div>
  <DatepickerInput
    hideOnSelect={false}
    onDateSet={date => {
      console.log('date set', date)
    }}
  />
</div>

`formatPattern`

Use date-fns format strings to define, what is displayed inside Input.

Click inside input

() => {
  const theme = {
    '--inputWidth': '160px',
  }
  return (
    <div>
      <div>Click inside input</div>
      <DatepickerInput
        theme={theme}
        formatPattern="GGGG yo Do"
        onDateSet={date => {
          console.log('date set', date)
        }}
      />
    </div>
  )
}

() => {
  const theme = {
    '--inputWidth': '160px',
  }
  return (
    <div>
      <div>Click inside input</div>
      <DatepickerInput
        theme={theme}
        formatPattern="GGGG yo Do"
        onDateSet={date => {
          console.log('date set', date)
        }}
      />
    </div>
  )
}

Description

Props

Display mode

`popover`

Set `Datepicker` props

`hideOnSelect`

`formatPattern`