Components / Forms

DatePicker

A polished calendar picker with localized formatting and native form behavior.

Preview

Install

Run in your project

npx @getweini/cli@latest add date-picker

Use cases

Date of birth

Choose a calendar date and submit a canonical YYYY-MM-DD value.

Appointment day

Show a local date format while keeping timezone decisions in application scheduling logic.

Usage example

Vue

<script setup lang="ts">
import { ref } from 'vue'
import DatePicker from './components/ui/date-picker/DatePicker.vue'
const date = ref('')
</script>

<template>
  <label for="start-date">Start date</label>
  <DatePicker
    id="start-date"
    v-model="date"
    name="startDate"
    min="2026-01-01"
    locale="en-GB"
    :messages="{
      calendarLabel: 'Choose a start date',
      previousMonth: 'Previous month',
      nextMonth: 'Next month',
      chooseDate: 'Choose date',
      clearSelection: 'Clear date',
    }"
  />
</template>

More examples

British date display

The model stays YYYY-MM-DD even when the trigger is localized.

British date display

<script setup lang="ts">
import { ref } from 'vue'
import DatePicker from './components/ui/date-picker/DatePicker.vue'
const date = ref('')
const messages = {
  calendarLabel: 'Choose appointment date', previousMonth: 'Previous month', nextMonth: 'Next month',
  chooseDate: 'Choose date', clearSelection: 'Clear date',
}
</script>
<template>
  <label for="appointment-date">Appointment date</label>
  <DatePicker id="appointment-date" v-model="date" name="appointmentDate" locale="en-GB" :first-day-of-week="1" :messages="messages" required />
</template>

French booking window

Set supported bounds as canonical date strings.

French booking window

<script setup lang="ts">
import { ref } from 'vue'
import DatePicker from './components/ui/date-picker/DatePicker.vue'
const arrival = ref('')
const messages = {
  calendarLabel: 'Choisir une date', previousMonth: 'Mois précédent', nextMonth: 'Mois suivant',
  chooseDate: 'Choisir une date', clearSelection: 'Effacer la date',
}
</script>
<template>
  <label for="arrival">Date d’arrivée</label>
  <DatePicker id="arrival" v-model="arrival" min="2026-10-01" max="2026-12-31" locale="fr-FR" :first-day-of-week="1" :messages="messages" />
</template>

Key API

The most useful props, models, slots, events, and methods for this component.

Key API for DatePicker
Name	Type	Default or requirement
`v-model`	YYYY-MM-DD string	''
`size`	sm \| md \| lg	md
`invalid / disabled / readonly / required`	boolean	false
`min / max`	YYYY-MM-DD string	undefined
`locale`	Intl locale string	YYYY-MM-DD display
`firstDayOfWeek`	0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6	1
`messages`	DatePickerMessages	required

The custom calendar supports arrows, Home/End, Page Up/Down, and Escape. Its off-screen native date control preserves form serialization and constraints; always provide an associated label or ARIA name.

Implementation notes

The model and native form value are date-only YYYY-MM-DD strings; locale changes presentation, not storage.
Do not turn a date-only value into a UTC timestamp by appending Z. Combine it with a time and an IANA zone in application scheduling logic.

Accessibility and localization

Localize every messages field along with the locale and give the trigger an associated label.