> For the complete documentation index, see [llms.txt](https://2600hz.gitbook.io/sds/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://2600hz.gitbook.io/sds/sds-components/form-controls/range-date-picker/format-1.md). # Format ### Props
PropsData TypeRequired
langstring❌
classNamestring❌
labelstring❌
infostring❌
idstring✅
namestring❌
helptextstring❌
errorboolean❌
errorMesagestring❌
disabledboolean❌
readOnlyboolean❌
activeOnChangeboolean❌
onChangeFunction❌
minDatestring
(Format: mm/dd/yyyy)		❌
maxDatestring
(Format: mm/dd/yyyy)		❌
startDatestring
(Format: mm/dd/yyyy)		❌
endDatestring
(Format: mm/dd/yyyy)		❌
rangeLimitnumber❌
selectionMenuboolean❌
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;
}

❌
autopositionboolean❌
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. ![](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 |

{
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](/sds/sds-components/simple-components/text.md) * [Telicon](/sds/sds-components/simple-components/telicon.md) * [Label](/sds/sds-components/form-controls/label.md) * [Button](/sds/sds-components/simple-components/button.md) ## Live Demo For detailed code usage documentation, see the Storybooks for each framework below. {% embed url="" %}