> 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-3.0/sds-components/components/datepicker/code/rangedatepicker/subcomponents.md). # SubComponents ### Control The control subcomponent is required to render the `Control` of the `RangeDatePicker` component. ### Control API {% hint style="danger" %} Notice that there is a difference between using `hasError, isDisabled, isReadOnly` here or in the parent component. It is not recommended to change this props in the `Control` subcomponent, because this props can be inherited from the `Wrapper`. If you use it in the `Control` subcomponent, you will get the state only in the field. {% endhint %} ### API This component extends the native [\
](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes) API. That's why the className prop is not included in the table. | Props | Type | Required | | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- | | `align` | `'start' \| 'center' \| 'end'` | :x: | | `alignOffset` | `number` | :x: | | `side` | `'top' \| 'right' \| 'bottom' \| 'left'` | :x: | | `sideOffset` | `number` | :x: | | `defaultOpen` | `boolean` | :x: | | `lang` | `'en' \| 'es'` | :x: | | `isDisabled` | `boolean` | :x: | | `hasError` | `boolean` | :x: | | `isReadOnly` | `boolean` | :x: | | `format` | `'dd/mm/yyyy' \| 'mm/dd/yyyy' \| 'yyyy/mm/dd'` | :x: | | `minDate` | `string` | :x: | | `maxDate` | `string` | :x: | | `startDate` | `string` | :x: | | `endDate` | `string` | :x: | | `defaultStartDate` | `string` | :x: | | `defaultEndDate` | `string` | :x: | | `showPredefinedSelectionsMenu` | `boolean` | :x: | | `predefinedSelection` | `\| 'today' \| 'yesterday' \| 'last7Days' \| 'last30Days' \| 'thisMonth' \| 'lastMonth';` | :x: | | `predefinedMenuOptions` | [`SelectionMenuOptions`](https://app.gitbook.com/o/-M_7-lSPEt2IeTSqnKOP/s/3Lcw1cy2vsA9bEz125dK/~/changes/79/sds-components/components/datepicker/code/rangedatepicker/subcomponents) | :x: | | `daysRangeLimit` | number | :x: | | `onDateSelection` | `(e: RangeDatePickerSelectionEventType) => void;` | :x: | ### SelectionMenuOptions Interface
align This prop changes the position of the `Menu` based on the `Trigger`.
alignOffset An offset in pixels from the `"start"` or `"end"` alignment options.
side Controls the side the menu of the DatePicker is rendered from, always based on the trigger. Will be reversed when collisions occur automatically.
sideOffset The distance in pixels from the trigger.
defaultOpen Controls a default open state for the menu of the DatePicker.
lang To load a `SingleDatePicker`language between english and spanish
hasError To load an error state.
isDisabled To load a disabled state.
isReadOnly To load a reaOnly state
format To change the format the date is presented.
minDate A minimum valid date.
maxDate A maximum valid date.
startDate and endDate When using the controlled approach, to pass a start and end date.
defaultStartDate and defaultEndDate To pass an initial start and end date.
showPredefinedSelectionsMenu This prop allows the selectionMenu to be shown.
predefinedSelection If the prop showPredefinedSelectionsMenu is true, then this prop can be used, to pass an object of predefined selections.
daysRangeLimit To mark a limit on max days selected.
onDateSelection Triggered when a date selection is done, returning an event. This is used for the controlled approach.
### HelpText The HelpText subcomponent extends the SDS HelpText component. See for reference: [HelpText](/sds/sds-3.0/sds-components/components/helptext.md) ### Label The Label subcomponent extends the SDS label component. See for reference: [Label](broken://pages/TwCP2I3z2hP5oGNIUov2)