# DateRangePicker

A component for selecting a date range.

## Usage <a href="#usage" id="usage"></a>

```jsx
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

![](https://1303901111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqkA65ZBta5cBbldyxyst%2Fuploads%2Fgit-blob-9fa7ab5c29fffab2d34c60ea7ed136bac24941f4%2FSchermata%202022-06-25%20alle%2022.54.46.png?alt=media)

## Props <a href="#props" id="props"></a>

#### `format` <a href="#format" id="format"></a>

* Type: `String`
* Default: `'MM/DD/YYYY'`

Format for the displayed dates.

#### `onChange` <a href="#onchange" id="onchange"></a>

* Type: `Function`: `({start, end}: {start: Date, end: Date}) -> *`
* Default: `() => {}`

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

#### `startDate` <a href="#startdate" id="startdate"></a>

* Type: `Date`
* Default: none

Selected start date.

#### `endDate` <a href="#enddate" id="enddate"></a>

* Type: `Date`
* Default: none

Selected end date.