Datepicker

Source

<script setup lang="ts">
import { ref } from "vue";
import MtDatepicker from "@shopware-ag/meteor-component-library/MtDatepicker";

const value = ref<string | null>(null);
</script>

<template>
  <mt-datepicker label="Datepicker" v-model="value" />
</template>

Usage

Datepicker is a calendar-style input for choosing a date, a time, or both together. Use it when a structured picker is safer and faster than freeform date input, and use range mode when users need to define a start and end date in one field.

import { MtDatepicker } from "@shopware-ag/meteor-component-library";

Examples

Date only

<script setup lang="ts">
import { ref } from "vue";
import MtDatepicker from "@shopware-ag/meteor-component-library/MtDatepicker";

const value = ref("2024-11-13T00:00:00.000Z");
</script>

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

Time only

<script setup lang="ts">
import { ref } from "vue";
import MtDatepicker from "@shopware-ag/meteor-component-library/MtDatepicker";

const value = ref("12:40");
</script>

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

Range

<script setup lang="ts">
import { ref } from "vue";
import MtDatepicker from "@shopware-ag/meteor-component-library/MtDatepicker";

const value = ref(["2024-11-13T00:00:00.000Z", "2024-11-16T00:00:00.000Z"]);
</script>

<template>
  <mt-datepicker label="Campaign period" date-type="date" :range="true" v-model="value" />
</template>

API reference

Props

Prop	Type	Default
`label` A label for your date picker field. It helps the user understand what this field is for.	`string \| null`	`null`
`date-type` Defines the type of the date picker. Options: "date" (for selecting a date), or "datetime" (for selecting both).	`"time" \| "datetime" \| "date"`	`"datetime"`
`locale` Sets the locale for the date picker. This affects things like the language used for month names and weekdays.	`string`	`"de"`
`format` The format of the date picker. You can use a string or a function to format the date.	`string \| ((date: Date) => string) \| ((dates: Date[]) => string) \| undefined`	`undefined`
`time-zone` Defines the time zone for the date picker. Useful for adjusting date and time according to a specific timezone.	`string`	`"UTC"`
`model-value` The value of the date picker. Can be a single string or an array of strings. This represents the currently selected date(s).	`string \| string[] \| Date \| Date[] \| null`	`null`
`placeholder` Placeholder text to show in the date picker input field when no date is selected.	`string`	`"Y-m-d ..."`
`is24` Determines if the timepicker is in 24 or 12 hour format	`boolean`	`true`
`required` Determines if the date picker field is required. If true, the user must select a value before submitting the form.	`boolean`	`false`
`disabled` Determines if the date picker field is disabled. If true, the user will not be able to interact with the field.	`boolean`	`false`
`range` Enables the date range selection feature. If true, the user can select a start and end date.	`boolean`	`false`
`size` Sets the size of the datepicker. Options: "small" or "default".	`"default" \| "small"`	`"default"`
`error` An error in your business logic related to this field. For example: {"code": 500, "detail": "Error while saving"}	`{ code?: number \| undefined; detail?: string \| undefined; } \| null`	`null`
`help-text` Help text for the date picker.	`string`	`undefined`
`min-date` The minimum selectable date. Can be a Date object or an ISO string. Any date before this will be disabled in the calendar. For example: "today"	`string \| Date`	`undefined`
`hour-increment` The increment for hours in the time picker grid. Controls how many hours are skipped when navigating through the hours overlay.	`number`	`1`
`minute-increment` The increment for minutes in the time picker grid. Controls how many minutes are skipped when navigating through the minutes overlay.	`number`	`1`
`text-input` Enables typing directly into the input field.	`boolean`	`false`
`max-date` The maximum selectable date. Can be a Date object or an ISO string	`string \| Date`	`undefined`

Events

Event	Payload
`update:modelValue`	`[value: string \| string[] \| (string \| null)[] \| null]`

Best practices

Match the dateType to the value users actually need, such as date, time, or datetime.
Use a clear label so users know what event, deadline, or schedule the value belongs to.
Set the timezone intentionally when the chosen value is shared across regions or systems.

Don't

Do not use Datepicker when a plain text field is enough for a non-date value.
Do not expose time selection if the feature only needs a date.
Do not leave timezone behavior implicit when it affects saved values.

Behavior

dateType controls whether the picker behaves as a date, time, or datetime input.
range lets one field hold a start and end value.
timeZone affects how values are interpreted and displayed.
helpText, required, disabled, error, and size integrate with the shared field styling.

Accessibility

Always provide a visible label so users understand what date or time they are setting.
Use the simplest picker mode that fits the task, because extra controls increase interaction cost.
If timezone matters for the saved value, explain that nearby instead of relying only on the hint.

Edit this pageorReport an issue

Data Table

A flexible table for displaying large datasets with pagination, sorting, filtering, and row selection.

Email Field

A form input for entering and validating a single email address.