MonthRange

Month range picker

Props

fromDate

Class(moment)

required

maxDate

Class(moment)

null

minDate

Class(moment)

null

nameFrom

String

"fromDate"

nameTo

String

"toDate"

onChange

Func

required

placeholder

String

"YYYY-MM"

toDate

Class(moment)

required

Examples

MonthRange picker

FROM

YYYY-MMSep 2021

Invalid date

YYYY-MMOct 2021

Invalid date

<Container style={{ height: '280px' }}>
  <State initial={{ fromDate: moment(), toDate: moment().add(1, 'month') }}>
    {({ setState, state, resetState }) => {
      return (
        <MonthRange
          fromDate={state.fromDate}
          toDate={state.toDate}
          onChange={(name, date) => {
            setState({ [name]: date })
            console.log('date changed:', name, date.format('YYYY-MM'))
          }}
        />
      )
    }}
  </State>
</Container><Container style={{ height: '280px' }}>
  <State initial={{ fromDate: moment(), toDate: moment().add(1, 'month') }}>
    {({ setState, state, resetState }) => {
      return (
        <MonthRange
          fromDate={state.fromDate}
          toDate={state.toDate}
          onChange={(name, date) => {
            setState({ [name]: date })
            console.log('date changed:', name, date.format('YYYY-MM'))
          }}
        />
      )
    }}
  </State>
</Container>

MonthRange picker with defined maximal range

FROM

YYYY-MMSep 2021

Invalid date

YYYY-MMOct 2021

Invalid date

<Container style={{ height: '280px' }}>
  <State initial={{ fromDate: moment(), toDate: moment().add(1, 'month') }}>
    {({ setState, state, resetState }) => {
      return (
        <MonthRange
          fromDate={state.fromDate}
          toDate={state.toDate}
          onChange={(name, date) => {
            setState({ [name]: date })
            console.log('date changed:', name, date.format('YYYY-MM'))
          }}
          maxDate={moment().add(1, 'year')}
          minDate={moment().subtract(1, 'year')}
        />
      )
    }}
  </State>
</Container><Container style={{ height: '280px' }}>
  <State initial={{ fromDate: moment(), toDate: moment().add(1, 'month') }}>
    {({ setState, state, resetState }) => {
      return (
        <MonthRange
          fromDate={state.fromDate}
          toDate={state.toDate}
          onChange={(name, date) => {
            setState({ [name]: date })
            console.log('date changed:', name, date.format('YYYY-MM'))
          }}
          maxDate={moment().add(1, 'year')}
          minDate={moment().subtract(1, 'year')}
        />
      )
    }}
  </State>
</Container>

MonthRange

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

Examples

MonthRange picker

MonthRange picker with defined maximal range

Props