Date picker

Import

import { DatePicker } from "@dr-max/ui/date-picker"

The entry carries its own precompiled CSS (including the styles of the Icon, Input, Required and Spinner parts it composes) — no extra style imports needed.

Usage

<script setup lang="ts">
import { DatePicker } from "@dr-max/ui/date-picker"
import { ref } from "vue"

const dateOfBirth = ref("")
</script>

<template>
  <DatePicker
    v-model="dateOfBirth"
    label="Date of birth"
    day-label="Day"
    month-label="Month"
    year-label="Year"
  />
</template>

Value format

The model is a plain YYYY-MM-DD string. The segments validate as the user types, and only a complete valid date is emitted back — while the input is partial or impossible (e.g. 31 February), the model keeps its previous value:

<script setup lang="ts">
import { DatePicker } from "@dr-max/ui/date-picker"
import { ref } from "vue"

const dateOfBirth = ref("1990-05-24")
</script>

<template>
  <DatePicker v-model="dateOfBirth" label="Date of birth" />
</template>

Year range

Years must be greater than min-year and at most max-year (which defaults to the current year):

<template>
  <DatePicker v-model="dateOfBirth" label="Date of birth" :min-year="1900" />
</template>

Validation

Each segment reports its own message (day-invalid-label, month-invalid-label, year-invalid-label), and invalid-date-label covers segments that are valid individually but do not form a real date. External errors render below the segments — errors with the param "required" are skipped:

<template>
  <DatePicker
    v-model="dateOfBirth"
    label="Date of birth"
    touched
    :errors="[{ label: 'Enter your date of birth', param: 'format' }]"
  />
</template>

Disabled

<template>
  <DatePicker v-model="dateOfBirth" label="Date of birth" disabled />
</template>

Playground

<script setup lang="ts">
import { DatePicker } from '@dr-max/ui/date-picker'
</script>

<template>
  <DatePicker label="Date of birth" day-label="Day" month-label="Month" year-label="Year" />
</template>