@mozaic-ds/vue/src/components/datepicker/README.md

Mozaic-Vue is the Vue.js implementation of ADEO Design system

# MDatepicker

A date picker is an input component that allows users to select a date from a calendar interface or manually enter a date value. It enhances usability by providing structured date selection, reducing input errors, and ensuring format consistency. Date Pickers are commonly used in forms, booking systems, scheduling tools, and data filtering interfaces to facilitate accurate date entry.<br><br> To put a label, requierement text, help text or to apply a valid or invalid message, the examples are available in the [Field section](/docs/form-elements-field--docs#input).


## Props

| Name | Description | Type | Default |
| --- | --- | --- | --- | 
| `id*` | A unique identifier for the datepicker element, used to associate the label with the form element. | `string` | - |
| `name` | The name attribute for the datepicker element, typically used for form submission. | `string` | - |
| `modelValue` | The current value of the datepicker field. | `string` `number` | - |
| `isInvalid` | If `true`, applies an invalid state to the datepicker. | `boolean` | - |
| `disabled` | If `true`, disables the datepicker, making it non-interactive. | `boolean` | - |
| `size` | Determines the size of the datepicker. | `"s"` `"m"` | `"m"` |
| `readonly` | If `true`, the datepicker is read-only (cannot be edited). | `boolean` | - |
| `isClearable` | If `true`, a clear button will appear when the datepicker has a value. | `boolean` | - |
| `clearLabel` | The label text for the clear button. | `string` | `"clear content"` |

## Events

| Name | Description | Type |
| --- | --- | --- |
| `update:modelValue` | Emits when the datepicker value changes, updating the `modelValue` prop. | [value: string | number] |