<!-- AUTO-GENERATED by packages/components/bin/generate-skill-component-catalog.js. Do not edit by hand. -->

# r-input-date

A date input form control with structured day, month, and year fields and built-in validation.

Example
```
<r-input-date name="birthdate" label="Date of birth" required></r-input-date>
```

## class: `RInputDate`, `r-input-date`

### Fields

| Name                    | Privacy | Type      | Default        | Description                                                                                                                                                                   | Inherited From |
| ----------------------- | ------- | --------- | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| `customErrorMessage`    |         | `string`  |                | Custom error message displayed for any validation failures in the input.                                                                                                      |                |
| `dayAriaLabel`          |         | `string`  | `'Day'`        | Defines label for the input for the day                                                                                                                                       |                |
| `disabled`              |         | `boolean` |                | Prevents user interaction and applies disabled style                                                                                                                          |                |
| `error`                 |         | `string`  |                | The way to provide error message separately from Constraint Validation API.                                                                                                   |                |
| `fieldIndicator`        |         | `string`  |                | Text of an additional marker in the label                                                                                                                                     |                |
| `form`                  |         | `string`  |                | Specifies the `id` of the `<form>` to which the element belongs                                                                                                               |                |
| `format`                |         | `string`  | `'DD/MM/YYYY'` | Specifies a date format                                                                                                                                                       |                |
| `fullWidth`             |         | `boolean` |                | Defines if the component suppose to occupy 100% width                                                                                                                         |                |
| `hint`                  |         | `string`  |                | Optional hint, visually presented under the input,<br>giving additional context to the user                                                                                  |                |
| `invalid`               |         | `boolean` |                | Validity indicator, serving to change UI of the component                                                                                                                     |                |
| `invalidDateMessage`    |         | `string`  |                | Custom error message displayed when date is not valid.                                                                                                                        |                |
| `label`                 |         | `string`  |                | The text on the label                                                                                                                                                         |                |
| `max`                   |         | `string`  |                | Maximum date value (in the same format as the date input).<br>Note: When changing the `format` prop, ensure `max` is also updated to match the new format.                   |                |
| `min`                   |         | `string`  |                | Minimum date value (in the same format as the date input).<br>Note: When changing the `format` prop, ensure `min` is also updated to match the new format.                   |                |
| `monthAriaLabel`        |         | `string`  | `'Month'`      | Defines label for the input for the month                                                                                                                                     |                |
| `name`                  |         | `string`  |                | Specifies a name for a input                                                                                                                                                  |                |
| `novalidate`            |         | `boolean` |                | Specifies if element must be ignored during validation of the form elements                                                                                                   |                |
| `rangeOverflowMessage`  |         | `string`  |                | Custom error message displayed when date is after the maximum date.                                                                                                           |                |
| `rangeUnderflowMessage` |         | `string`  |                | Custom error message displayed when date is before the minimum date.                                                                                                          |                |
| `readonly`              |         | `boolean` |                | Makes the date inputs read-only: users can focus and copy the value,<br>but cannot modify it (value still submitted with the form unlike disabled).                          |                |
| `required`              |         | `boolean` |                | Specifies that an input is required/must be filled out                                                                                                                        |                |
| `submitOnEnter`         |         | `boolean` | `true`         | Controls whether pressing Enter triggers implicit form submission when this input is inside a form.<br>Set to `false` for custom Enter behavior without submitting the form. |                |
| `valid`                 |         | `boolean` |                | Visual indication of valid state                                                                                                                                              |                |
| `value`                 |         | `string`  | `''`           | The value of the date input                                                                                                                                                   |                |
| `valueMissingMessage`   |         | `string`  |                | Set custom message for `valueMissing` property of a ValidityState object (set by `required`)                                                                                  |                |
| `yearAriaLabel`         |         | `string`  | `'Year'`       | Defines label for the input for the year                                                                                                                                      |                |

### Methods

| Name                | Privacy | Description                                                                                   | Parameters        | Return             | Inherited From |
| ------------------- | ------- | --------------------------------------------------------------------------------------------- | ----------------- | ------------------ | -------------- |
| `checkValidity`     |         | Validates the input date without triggering UI and returns a boolean indicating its validity. |                   | `Promise<boolean>` |                |
| `getFormat`         |         | Gets the current date format                                                                  |                   | `Promise<string>`  |                |
| `getValue`          |         | Get the date value                                                                            |                   | `Promise<string>`  |                |
| `isDirty`           |         | Gets the dirty state (whether value has been changed by user)                                 |                   | `Promise<boolean>` |                |
| `isTouched`         |         | Gets the touched state (whether user has interacted with the input)                           |                   | `Promise<boolean>` |                |
| `markAsPristine`    |         | Resets touched and dirty states to pristine (untouched/clean)                                 |                   | `Promise<void>`    |                |
| `reset`             |         | Resets the component by clearing all input values and focusing the first input.               |                   | `Promise<void>`    |                |
| `setCustomValidity` |         | Validates an element, displays provided message in case value is invalid.                     | `message: string` | `Promise<void>`    |                |
| `setFormat`         |         | Sets the date format                                                                          | `format: string`  | `Promise<void>`    |                |
| `setValue`          |         | Sets the date value                                                                           | `value: string`   | `Promise<void>`    |                |

### Events

| Name        | Type                                                           | Description                                                        | Inherited From |
| ----------- | -------------------------------------------------------------- | ------------------------------------------------------------------ | -------------- |
| `rChange`   | `CustomEvent<{ element: HTMLRInputDateElement; value: any; }>` | Emits 'rChange' event when value of the component has been changed |                |
| `rInput`    | `CustomEvent<{ element: HTMLRInputDateElement; value: any; }>` | Emits 'rInput' event when value of the component is changing       |                |
| `rReset`    | `CustomEvent<{ element: HTMLRInputDateElement; value: any; }>` | Emits 'rReset' event when form containing the component was reset  |                |
| `rValidate` | `CustomEvent<{ state: string; message: string; }>`             | Emits event after each validation                                  |                |

### Attributes

| Name                      | Field                 | Inherited From |
| ------------------------- | --------------------- | -------------- |
| `custom-error-message`    | customErrorMessage    |                |
| `day-aria-label`          | dayAriaLabel          |                |
| `disabled`                | disabled              |                |
| `error`                   | error                 |                |
| `field-indicator`         | fieldIndicator        |                |
| `form`                    | form                  |                |
| `format`                  | format                |                |
| `full-width`              | fullWidth             |                |
| `hint`                    | hint                  |                |
| `invalid`                 | invalid               |                |
| `invalid-date-message`    | invalidDateMessage    |                |
| `label`                   | label                 |                |
| `max`                     | max                   |                |
| `min`                     | min                   |                |
| `month-aria-label`        | monthAriaLabel        |                |
| `name`                    | name                  |                |
| `novalidate`              | novalidate            |                |
| `range-overflow-message`  | rangeOverflowMessage  |                |
| `range-underflow-message` | rangeUnderflowMessage |                |
| `readonly`                | readonly              |                |
| `required`                | required              |                |
| `submit-on-enter`         | submitOnEnter         |                |
| `valid`                   | valid                 |                |
| `value`                   | value                 |                |
| `value-missing-message`   | valueMissingMessage   |                |
| `year-aria-label`         | yearAriaLabel         |                |

### Slots

| Name       | Description                                                   |
| ---------- | ------------------------------------------------------------- |
| `label`    | Custom label content placed above the date input              |
| `popover`  | Popover element attached to the label area                    |
| `trailing` | Trailing icon or element placed inside the input on the right |

<hr/>

## Exports

| Kind                        | Name           | Declaration | Module | Package |
| --------------------------- | -------------- | ----------- | ------ | ------- |
| `js`                        | `RInputDate`   | RInputDate  |        |         |
| `custom-element-definition` | `r-input-date` | RInputDate  |        |         |