DateRangePicker

A component for selecting a date range.

Usage

import React, { useState } from 'react'
import { DateRangePicker } from '@aragon/ui'

const DateRange = () => {
  const [range, setRange] = useState({
    start: null,
    end: null,
  })
  return (
    <DateRangePicker
      startDate={range.start}
      endDate={range.end}
      onChange={setRange}
    />
  )
}

Demonstration

Props

format

  • Type: String

  • Default: 'MM/DD/YYYY'

Format for the displayed dates.

onChange

  • Type: Function: ({start, end}: {start: Date, end: Date}) -> *

  • Default: () => {}

This callback is called whenever the user selects clicks "Apply" after selecting a date.

startDate

  • Type: Date

  • Default: none

Selected start date.

endDate

  • Type: Date

  • Default: none

Selected end date.

Last updated