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

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

Last updated