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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://2600hz.gitbook.io/sds/sds-3.0/sds-components/components/datepicker/code/singledatepicker/subcomponents.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.