@ptlm-azulejo/datepicker
v0.0.2-alpha.14
Published
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 Pic
Downloads
174
Readme
Datepicker
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.
To put a label, requirement text, help text or to apply a valid or invalid message, pair this component with the Field component.
Installation
npm install @ptlm-azulejo/datepicker @ptlm-azulejo/themes
# or
yarn add @ptlm-azulejo/datepicker @ptlm-azulejo/themesStyles & theming
The component reads theme CSS variables, so it needs @ptlm-azulejo/themes. Import a
brand preset (it bundles the base tokens) and the component styles, then set the
brand class on the root element:
import '@ptlm-azulejo/themes/presets/leroy-merlin.css' // or /presets/adeo.css
import '@ptlm-azulejo/datepicker/style.css'<html class="preset-lm" data-theme="dark">Without a preset and the
.preset-*class, the component renders uncolored. See the themes package for brand switching, dark mode, and custom brands.
Props
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | Required. A unique identifier for the datepicker element, used to associate the label with the form element. |
| name | string | — | The name attribute for the datepicker element, typically used for form submission. |
| modelValue | string | number | — | The current value of the datepicker field. |
| isInvalid | boolean | — | If true, applies an invalid state to the datepicker. |
| disabled | boolean | — | If true, disables the datepicker, making it non-interactive. |
| size | "s" | "m" | "m" | Determines the size of the datepicker. |
| readonly | boolean | — | If true, the datepicker is read-only (cannot be edited). |
| isClearable | boolean | — | If true, a clear button will appear when the datepicker has a value. |
| clearLabel | string | "clear content" | The label text for the clear button. |
| minDate | string | — | The minimum selectable date (format: YYYY-MM-DD). |
| maxDate | string | — | The maximum selectable date (format: YYYY-MM-DD). |
| enabledDates | string[] | — | Array of specific dates that should be enabled; all others disabled. Takes priority over disabledDates. |
| disabledDates | string[] | — | Array of specific dates that should be disabled; all others in range remain enabled. |
Events
| Name | Payload | Description |
| --- | --- | --- |
| update:modelValue | string | number | Emitted when the datepicker value changes. |
Basic Usage
<script setup>
import { AzDatepicker } from '@ptlm-azulejo/datepicker'
</script>
<template>
<AzDatepicker id="birthdate" name="birthdate" />
</template>With clear button
<template>
<AzDatepicker
id="appointment"
v-model="appointment"
is-clearable
clear-label="Effacer la date"
/>
</template>Invalid state
<template>
<AzDatepicker id="deadline" :is-invalid="true" />
</template>Small size
<template>
<AzDatepicker id="date-s" size="s" />
</template>Date range
<template>
<AzDatepicker
id="range"
v-model="range"
min-date="2026-06-01"
max-date="2026-06-30"
/>
</template>Disabled dates
<template>
<AzDatepicker
id="disabled"
v-model="date"
:disabled-dates="['2026-06-10', '2026-06-20']"
/>
</template>Enabled dates
<template>
<AzDatepicker
id="enabled"
v-model="date"
:enabled-dates="['2026-06-15', '2026-06-20', '2026-06-25']"
/>
</template>