FormDatePicker

A date field with a calendar panel, formatted with Intl, one date or a range.

import { FormDatePicker } from '@zairakai/vue-components/Form'

Usage

<FormDatePicker />

Example

Stay

October 2026

Mon	Tue	Wed	Thu	Fri	Sat	Sun

<script setup>
  import { ref } from 'vue'

  const range = ref({ start: '2026-10-06', end: '2026-10-09' })
</script>

<template>
  <FormDatePicker
    v-model="range"
    range
    label="Stay"
    locale="en-GB"
  />
</template>

Props

Name	Type	Default	Description
id	string
class	string
modelValue	string|object	undefined	2026-10-05, or { start, end } when range.
range	boolean	false
name	string
form	string
label	string
placeholder	string
min	string
max	string
weekStart	number	1
locale	string
required	boolean	false
disabled	boolean	false
toggleLabel	string	'Choose a date'
clearLabel	string	'Clear'

Events

Name	Description
update:modelValue

Slots

Name	Description
icon

See Theming for the class hooks and the data-* state of the components.