SubComponents

Control

The control subcomponent is required to render the Control of the RangeDatePicker component.

Control API

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.

API

This component extends the native <div> API. That's why the className prop is not included in the table.

Props	Type	Required
align	'start' | 'center' | 'end'	❌
alignOffset	number	❌
side	'top' | 'right' | 'bottom' | 'left'	❌
sideOffset	number	❌
defaultOpen	boolean	❌
lang	'en' | 'es'	❌
isDisabled	boolean	❌
hasError	boolean	❌
isReadOnly	boolean	❌
format	'dd/mm/yyyy' | 'mm/dd/yyyy' | 'yyyy/mm/dd'	❌
minDate	string	❌
maxDate	string	❌
startDate	string	❌
endDate	string	❌
defaultStartDate	string	❌
defaultEndDate	string	❌
showPredefinedSelectionsMenu	boolean	❌
predefinedSelection	| 'today' | 'yesterday' | 'last7Days' | 'last30Days' | 'thisMonth' | 'lastMonth';	❌
predefinedMenuOptions	SelectionMenuOptions	❌
daysRangeLimit	number	❌
onDateSelection	(e: RangeDatePickerSelectionEventType) => void;	❌

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 SingleDatePickerlanguage 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

Label

The Label subcomponent extends the SDS label component. See for reference: Label