@webthatmatters/react-range-datepicker

react-range-datepicker

An easily customizable range datepicker

Dependencies

• moment
• react-dates

Getting Started

Installation

  npm install @webthatmatters/react-range-datepicker --save

Example of use

import RangeDatePicker from '@webthatmatters/react-range-datepicker';


<RangeDatePicker
  dates={{ from: moment(), to: moment().add(1, 'month') }}
  onDatesChange={dates => console.log(dates)}
  showOptions
/>

Overidding Options

<RangeDatePicker
  ...
  showOptions
  options={[
    {
      label: 'Today',
      startDate: moment().startOf('day'),
      endDate: moment().endOf('day')
    },
    {
      label: 'Yesterday',
      startDate: moment().subtract(1, 'days'),
      endDate: moment().subtract(1, 'days')
    }
  ]}
/>

Overriding styles

<RangeDatePicker
  ...
  styles={
    {
      selectedColor: '#608fc9',
      borderColor: '#ededed',
      dayColor: '#f2f5f7',
      textColor: '#1c2a3b',
      calendarIcon: 'path_to_icon'
    }
  }
/>

Overriding datepicker options

<RangeDatePicker
  ...
  datePickerOptions={{
    ...
    displayFormat: 'DD/MM/YYYY'
  }}
/>