Skip to main content
The MtDatepicker component allows users to select dates, times, or datetime values with an interactive calendar interface.

​
Import

import { MtDatepicker } from '@meteroid/component-library';

​
Props

​
modelValue
string | string[] | Date | Date[]
The value of the date picker. Can be a single value or an array for ranges.
​
label
string
A label for your date picker field.
​
dateType
'date' | 'datetime' | 'time'
default:"'datetime'"
Defines the type of the date picker.
​
locale
string
default:"'de'"
Sets the locale for the date picker. Affects language used for month names and weekdays.
​
format
string | Function
The format of the date picker. Defaults to ‘yyyy/MM/dd’ for date, ‘HH:mm’ for time, ‘yyyy/MM/dd, HH:mm’ for datetime.
​
timeZone
string
default:"'UTC'"
Defines the time zone for the date picker.
​
placeholder
string
default:"'Y-m-d ...'"
Placeholder text to show when no date is selected.
​
is24
boolean
default:"true"
Determines if the timepicker is in 24 or 12 hour format.
​
required
boolean
default:"false"
Determines if the date picker field is required.
​
disabled
boolean
default:"false"
Determines if the date picker field is disabled.
​
range
boolean
default:"false"
Enables the date range selection feature.
​
size
'small' | 'default'
default:"'default'"
Sets the size of the datepicker.
​
minDate
Date | string
The minimum selectable date. Dates before this will be disabled.
​
hourIncrement
number
default:"1"
The increment for hours in the time picker grid.
​
minuteIncrement
number
default:"1"
The increment for minutes in the time picker grid.
​
textInput
boolean
default:"false"
Enables typing directly into the input field.
​
helpText
string
Help text for the date picker.
​
error
object
An error in your business logic related to this field.

​
Events

​
update:modelValue
(value: string | string[] | null) => void
Emitted when the date value changes.

​
Usage

​
Basic Date Picker

<script setup>
import { ref } from 'vue';
const date = ref(null);
</script>

<template>
  <mt-datepicker 
    v-model="date"
    label="Select date"
    date-type="date"
  />
</template>

​
DateTime Picker

<template>
  <mt-datepicker 
    v-model="datetime"
    label="Appointment"
    date-type="datetime"
    time-zone="Europe/Berlin"
  />
</template>

​
Time Picker

<template>
  <mt-datepicker 
    v-model="time"
    label="Start time"
    date-type="time"
  />
</template>

​
Date Range

<template>
  <mt-datepicker 
    v-model="dateRange"
    label="Date range"
    date-type="date"
    range
  />
</template>

​
With Minimum Date

<template>
  <mt-datepicker 
    v-model="futureDate"
    label="Future date"
    date-type="date"
    min-date="today"
  />
</template>

​
Small Size

<template>
  <mt-datepicker 
    v-model="date"
    label="Compact date"
    size="small"
  />
</template>

​
Accessibility

  • Keyboard navigation through calendar (arrow keys)
  • Escape key closes the picker
  • Tab navigation through all interactive elements
  • Screen reader support with ARIA labels
  • Clear button accessible via keyboard
  • Error states communicated via aria-invalid and aria-describedby

Build docs developers (and LLMs) love

Get started for freeTalk to us