# Format
### Props
| Props | Data Type | Required |
|---|
| lang | string | ❌ |
| className | string | ❌ |
| label | string | ❌ |
| info | string | ❌ |
| id | string | ✅ |
| name | string | ❌ |
| helptext | string | ❌ |
| error | boolean | ❌ |
| errorMesage | string | ❌ |
| disabled | boolean | ❌ |
| readOnly | boolean | ❌ |
| activeOnChange | boolean | ❌ |
| onChange | Function | ❌ |
| minDate | string
(Format: mm/dd/yyyy) | ❌ |
| maxDate | string
(Format: mm/dd/yyyy) | ❌ |
| startDate | string
(Format: mm/dd/yyyy) | ❌ |
| endDate | string
(Format: mm/dd/yyyy) | ❌ |
| rangeLimit | number | ❌ |
| selectionMenu | boolean | ❌ |
| selectionMenuOptions | {
today: boolean; yesterday: boolean; last7Days: boolean; last30Days: boolean; thisMonth: boolean; lastMonth: boolean;
} | ❌ |
| selectionMenuOptionsText | {
today: string; yesterday: string; last7Days: string; last30Days: string; thisMonth: string; lastMonth: string;
} | ❌ |
| autoposition | boolean | ❌ |
| format | 'mm/dd/yyyy'
'dd/mm/yyyy'
'yyyy/mm/dd' | ❌ |
### 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.
This pre-selection ranges can be controlled using the `selectionMenuOptions` and `selectionMenuOptionsText` props.
### Event Response
| Property | Data Type |
| -------- | ---------------------------------------------------------------------- |
| id | string |
| name | string |
| value | {
startDate: 'mm/dd/yyyy',
endDate: 'mm/dd/yyyy'
}
|
| dateObj | {
startDate: Date,
endDate: Date
}
|
### Code
```tsx
```
## Components Dependency
For this component elaboration there were used the following internal components:
* [Text](https://2600hz.gitbook.io/sds/sds-components/simple-components/text)
* [Telicon](https://2600hz.gitbook.io/sds/sds-components/simple-components/telicon)
* [Label](https://2600hz.gitbook.io/sds/sds-components/form-controls/label)
* [Button](https://2600hz.gitbook.io/sds/sds-components/simple-components/button)
## Live Demo
For detailed code usage documentation, see the Storybooks for each framework below.
{% embed url="" %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://2600hz.gitbook.io/sds/sds-components/form-controls/range-date-picker/format-1.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.