> 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/singledatepicker/subcomponents.md).

# SubComponents

### Control

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

<details>

<summary>align</summary>

This prop changes the position of the `Menu` based on the `Trigger`.

</details>

<details>

<summary>alignOffset</summary>

An offset in pixels from the `"start"` or `"end"` alignment options.

</details>

<details>

<summary>side</summary>

Controls the side the menu of the DatePicker is rendered from, always based on the trigger. Will be reversed when collisions occur automatically.

</details>

<details>

<summary>sideOffset</summary>

The distance in pixels from the trigger.

</details>

<details>

<summary>defaultOpen</summary>

Controls a default open state for the menu of the DatePicker.

</details>

<details>

<summary>lang</summary>

To load a `SingleDatePicker`language between english and spanish&#x20;

</details>

<details>

<summary>hasError</summary>

To load an error state.

</details>

<details>

<summary>isDisabled</summary>

To load a disabled state.

</details>

<details>

<summary>isReadOnly</summary>

To load a reaOnly state

</details>

<details>

<summary>format</summary>

To change the format the date is presented.

</details>

<details>

<summary>minDate</summary>

A minimum valid date.

</details>

<details>

<summary>maxDate</summary>

A maximum valid date.

</details>

<details>

<summary>date</summary>

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

</details>

<details>

<summary>defaultDate</summary>

To load a default date.

</details>

<details>

<summary>onDateSelection</summary>

Triggered when a date selection is done, returning an event. This is used for the controlled approach.

</details>

### 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)