# Format

### Props

<table><thead><tr><th>Props</th><th width="380.66666666666663">Data Type</th><th>Required</th></tr></thead><tbody><tr><td>lang</td><td>string</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>className</td><td>string</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>label</td><td>string</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>info</td><td>string</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>id</td><td>string</td><td><span data-gb-custom-inline data-tag="emoji" data-code="2705">✅</span></td></tr><tr><td>name</td><td>string</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>helptext</td><td>string</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>error</td><td>boolean</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>errorMesage</td><td>string</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>disabled</td><td>boolean</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>readOnly</td><td>boolean</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>activeOnChange</td><td>boolean</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>onChange</td><td>Function</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>minDate</td><td>string<br>(Format: mm/dd/yyyy)</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>maxDate</td><td>string<br>(Format: mm/dd/yyyy)</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>startDate</td><td>string<br>(Format: mm/dd/yyyy)</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>endDate</td><td>string<br>(Format: mm/dd/yyyy)</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>rangeLimit</td><td>number</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>selectionMenu</td><td>boolean</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>selectionMenuOptions</td><td><p>{<br>  today: boolean; </p><p>  yesterday: boolean; </p><p>  last7Days: boolean; </p><p>  last30Days: boolean; </p><p>  thisMonth: boolean; </p><p>  lastMonth: boolean;<br>}</p></td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>selectionMenuOptionsText</td><td><p>{<br>  today: string; </p><p>  yesterday: string; </p><p>  last7Days: string; </p><p>  last30Days: string; </p><p>  thisMonth: string; </p><p>  lastMonth: string;<br>}</p></td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>autoposition</td><td>boolean</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>format</td><td>'mm/dd/yyyy'<br>'dd/mm/yyyy'<br>'yyyy/mm/dd'</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr></tbody></table>

### Description

This component allows users to select a range of days in the calendar.

### startDate and endDate

These props control the dates' selected range on the calendar, setting an initial and final date for the range.

### minDate and maxDate

These props limit the range of selectable dates in the calendar by stablishing a minimum or/and maximum date.

### autoposition

This feature allows developers to not worry about the correct location of the `Menu` or `MenuBox` component on the screen, because this will relocate it automatically, placing it on the top, bottom, right or left; it all depends on the available space.

### activeOnChange

By default, this component is going to execute the `onChange` action after the user has selected both dates, start date and end date. Anyway, in the case, developers need to have access to the values while the user is still doing the action (selecting start date only), they can use this prop to receive a response in real-time while the user is interacting with the component.

### selectionMenu

This option adds a menu to the calendar section, where the user can now select specific ranges of days.

![](https://1808678181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M_703CkzPx9rque70Qj%2Fuploads%2FrxqbtybdLHiBpgOPO4SD%2Fimagen.png?alt=media\&token=d25ced30-99f5-468a-9cc0-b25c4b76559a)![](https://1808678181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M_703CkzPx9rque70Qj%2Fuploads%2FtEsVKvbUiXVZX9L7Z2Nf%2Fimagen.png?alt=media\&token=46a07716-630c-4958-a352-3cf5404b3729)

This pre-selection ranges can be controlled using the `selectionMenuOptions` and `selectionMenuOptionsText` props.

### Event Response

| Property | Data Type                                                              |
| -------- | ---------------------------------------------------------------------- |
| id       | string                                                                 |
| name     | string                                                                 |
| value    | <p>{<br>  startDate: 'mm/dd/yyyy',<br>  endDate: 'mm/dd/yyyy'<br>}</p> |
| dateObj  | <p>{<br>  startDate: Date,<br>  endDate: Date<br>}</p>                 |

### Code

```tsx
<RangeDatePicker
  className="datePickerExample"
  errorMessage="Optional error message can offer better guidance."
  helptext="Optional help text can offer additional guidance."
  id="datePickerId"
  info="Lorem Ipsum"
  label="Date Picker Label"
  lang="en"
  name="datePickerName"
  onChange={changeEvent}
  selectionMenu
/>
```

## Components Dependency

For this component elaboration there were used the following internal components:

* [Text](../../simple-components/text)
* [Telicon](../../simple-components/telicon)
* [Label](../label)
* [Button](../../simple-components/button)

## Live Demo

For detailed code usage documentation, see the Storybooks for each framework below.

{% embed url="https://sipster-react-component-storybook.netlify.app/?path=/story/form-controls-range-date-picker--base-range-date-picker" %}
