MonthPicker

Month picker to select a single month or range.

Props

className

String

[Empty string]

date

Class(moment)

required

disabled

Bool

false

locale

Enum

maxDate

Class(moment)

null

minDate

Class(moment)

null

name

String

required

onChange

Func

required

placeholder

String

"YYYY-MM"

Examples

Single month picker

Sep 2021

Invalid date

<Container style={{ height: '280px' }}>
  <Value initial={moment()}>
    {({ set: setDate, value: date }) => {
      return (
        <MonthPicker
          name="monthPicker"
          date={date}
          onChange={(name, newDate) => {
            setDate(newDate)
            console.log('date changed:', name, newDate.format('YYYY-MM'))
          }}
        />
      )
    }}
  </Value>
</Container><Container style={{ height: '280px' }}>
  <Value initial={moment()}>
    {({ set: setDate, value: date }) => {
      return (
        <MonthPicker
          name="monthPicker"
          date={date}
          onChange={(name, newDate) => {
            setDate(newDate)
            console.log('date changed:', name, newDate.format('YYYY-MM'))
          }}
        />
      )
    }}
  </Value>
</Container>

Single month picker with defined range

Sep 2021

Invalid date

<Container style={{ height: '280px' }}>
  <Value initial={moment()}>
    {({ set: setDate, value: date }) => {
      return (
        <MonthPicker
          name="monthPicker"
          date={date}
          onChange={(name, newDate) => {
            setDate(newDate)
            console.log('date changed:', name, newDate.format('YYYY-MM'))
          }}
          maxDate={moment().add(1, 'year')}
          minDate={moment().subtract(1, 'year')}
        />
      )
    }}
  </Value>
</Container><Container style={{ height: '280px' }}>
  <Value initial={moment()}>
    {({ set: setDate, value: date }) => {
      return (
        <MonthPicker
          name="monthPicker"
          date={date}
          onChange={(name, newDate) => {
            setDate(newDate)
            console.log('date changed:', name, newDate.format('YYYY-MM'))
          }}
          maxDate={moment().add(1, 'year')}
          minDate={moment().subtract(1, 'year')}
        />
      )
    }}
  </Value>
</Container>

MonthPicker

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

Examples

Single month picker

Single month picker with defined range

Props