# DateRangePicker

This component is used to select a date range.

## Installation

```tsx
import { DateRangePicker } from 'uxp/components';
```

## Signature

```tsx
const DateRangePicker: React.FunctionComponent<IDateRangePickerProps>
```

## Examples

```tsx
<DateRangePicker
     startDate={startDate}
     endDate={endDate}
     closeOnSelect
     onChange={(newStart, newEnd) => { setStartDate(newStart); setEndDate(newEnd) }}
 />
```

## Properties

| Name              | Type                                                                                                                                                                                                                                                                                 | Mandatory | Default Value | Example Value |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------- | ------------- | ------------- |
| title             | string                                                                                                                                                                                                                                                                               | No        | -             | -             |
| startDate         | string \| Date                                                                                                                                                                                                                                                                       | Yes       | -             | -             |
| endDate           | string \| Date                                                                                                                                                                                                                                                                       | Yes       | -             | -             |
| preset            | string                                                                                                                                                                                                                                                                               | No        | -             | -             |
| onChange          | (newStartDate: string \| Date, newEndDate: string \| Date, preset?: string) => void                                                                                                                                                                                                  | Yes       | -             | -             |
| closeOnSelect     | boolean                                                                                                                                                                                                                                                                              | No        | -             | -             |
| disableInput      | boolean                                                                                                                                                                                                                                                                              | No        | -             | -             |
| options           | [IDatePickerOptions](https://help.iviva.com/uxp/v5/additional-resources/types/idatepickeroptions)                                                                                                                                                                                    | No        | -             | -             |
| hideLabels        | boolean                                                                                                                                                                                                                                                                              | No        | -             | -             |
| hideInput         | boolean                                                                                                                                                                                                                                                                              | No        | -             | -             |
| showFullMonthName | boolean                                                                                                                                                                                                                                                                              | No        | -             | -             |
| compact           | boolean                                                                                                                                                                                                                                                                              | No        | -             | -             |
| spacingMode       | [SpacingMode](https://help.iviva.com/uxp/v5/additional-resources/types/spacingmode)                                                                                                                                                                                                  | No        | -             | -             |
| renderAsPill      | { minWidth?: number, maxWidth?: number }                                                                                                                                                                                                                                             | No        | -             | -             |
| presets           | { enable: boolean customPresets?: DateRangePreset\[], renderPreset?: (preset: DateRangePreset, index: number, onSelectPreset: (preset: string) => void) => React.ReactNode, parseRelativeDatesOnSelect?: boolean // if this is set to true, relative dates will be parsed to dates } | No        | -             | -             |

## Related Types

* [IDateRangePickerProps](https://help.iviva.com/uxp/v5/additional-resources/types/idaterangepickerprops)
* [IDatePickerOptions](https://help.iviva.com/uxp/v5/additional-resources/types/idatepickeroptions)
* [ISpecialDate](https://help.iviva.com/uxp/v5/additional-resources/types/ispecialdate)
* [SpacingMode](https://help.iviva.com/uxp/v5/additional-resources/types/spacingmode)
* [DateRangePreset](https://help.iviva.com/uxp/v5/additional-resources/types/daterangepreset)
* [RelativeDate](https://help.iviva.com/uxp/v5/additional-resources/types/relativedate)