SubComponents

Control

The control subcomponent is required to render the Control of the SingleDatePicker 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	❌
date	string	❌
defaultDate	string	❌
onDateSelection	(e: SingleDatePickerSelectionEventType) => void;	❌

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.

date

When using the controlled approach, to pass a controlled date.

defaultDate

To load a default date.

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