Date Picker

Calendar date picker with month/year navigation, today button, min/max constraints, and custom disabled dates.

vue

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

<template>
  <VxDatePicker v-model="date" />
</template>

With Initial Value

2025-06-15

vue

<template>
  <VxDatePicker v-model="date" />
</template>

Custom Format

Display format and value format can differ. Type a date like 15.06.2025 and it parses correctly.

DD.MM.YYYY

DD-MM-YYYY

DD/MM/YYYY

vue

<template>
  <VxDatePicker format="DD.MM.YYYY" placeholder="DD.MM.YYYY" />
  <VxDatePicker format="DD-MM-YYYY" placeholder="DD-MM-YYYY" />
  <VxDatePicker format="DD/MM/YYYY" placeholder="DD/MM/YYYY" />
</template>

Masked Input

Auto-inserts separators as you type. The mask is auto-generated from the format, or set a custom one.

DD/MM/YYYY → auto mask ##/##/####

DD.MM.YYYY → auto mask ##.##.####

Custom mask ##-##-####

vue

<template>
  <!-- Auto mask from format -->
  <VxDatePicker format="DD/MM/YYYY" />
  <!-- Types: 1 → 15 → 15/ → 15/06 → 15/06/ → 15/06/2025 -->

  <!-- Custom mask -->
  <VxDatePicker format="DD-MM-YYYY" mask="##-##-####" />

  <!-- ISO format auto mask -->
  <VxDatePicker format="YYYY-MM-DD" />
  <!-- Types: 2 → 20 → 202 → 2025 → 2025- → 2025-06 → ... -->
</template>

Value Format

Display one format but emit a different one to v-model.

vue

<template>
  <!-- Displays as 15.06.2025, v-model gets 2025-06-15 -->
  <VxDatePicker format="DD.MM.YYYY" value-format="YYYY-MM-DD" />
</template>

Timestamp Value

Set value-format="timestamp" to get a Unix millisecond number as v-model.

vue

<script setup>
const date = ref(null) // will be a number like 1718409600000
</script>

<template>
  <VxDatePicker v-model="date" format="DD.MM.YYYY" value-format="timestamp" />
</template>

Non-editable

Disable typing, only allow picking from the calendar.

Click to pick

vue

<template>
  <VxDatePicker :editable="false" />
</template>

Min / Max Date

vue

<template>
  <VxDatePicker v-model="date" min-date="2025-01-01" max-date="2025-12-31" />
</template>

Disabled Dates

Disable past dates or weekends with a custom function.

No past dates

No weekends

vue

<script setup>
function isPastDate(date) {
  return date < new Date()
}
function isWeekend(date) {
  return date.getDay() === 0 || date.getDay() === 6
}
</script>

<template>
  <VxDatePicker :disabled-date="isPastDate" placeholder="Future only" />
  <VxDatePicker :disabled-date="isWeekend" placeholder="Weekdays only" />
</template>

Quick Options

Shortcuts panel appears on the left side of the calendar.

vue

<script setup>
const shortcuts = [
  { label: 'Today', value: () => new Date() },
  { label: 'Yesterday', value: () => { const d = new Date(); d.setDate(d.getDate() - 1); return d } },
  { label: 'A week ago', value: () => { const d = new Date(); d.setDate(d.getDate() - 7); return d } },
  { label: 'A month ago', value: () => { const d = new Date(); d.setMonth(d.getMonth() - 1); return d } },
]
</script>

<template>
  <VxDatePicker v-model="date" :shortcuts="shortcuts" />
</template>

Custom Shortcuts

Pass fixed Date objects for known dates.

vue

<script setup>
const shortcuts = [
  { label: 'New Year', value: new Date(2026, 0, 1) },
  { label: 'Valentine', value: new Date(2026, 1, 14) },
  { label: 'Independence', value: new Date(2026, 8, 1) },
]
</script>

<template>
  <VxDatePicker v-model="date" :shortcuts="shortcuts" />
</template>

Disabled Dates Array

Pass an array of specific dates to disable.

vue

<script setup>
const holidays = ['2026-01-01', '2026-03-08', '2026-03-21', '2026-05-01', '2026-12-31']
</script>

<template>
  <VxDatePicker :disabled-dates="holidays" />
</template>

Sunday First

vue

<template>
  <VxDatePicker :first-day-of-week="0" />
</template>

Custom Trigger

vue

<template>
  <VxDatePicker :trigger-style="{ borderRadius: '24px', height: '40px' }" />
</template>

Disabled

2026-03-15

vue

<template>
  <VxDatePicker v-model="date" disabled />
</template>

Week Picker

Selects an entire week. Shows week number in the trigger.

Pick a week

vue

<template>
  <VxDatePicker v-model="value" type="week" />
</template>

Month Picker

Pick a month

vue

<template>
  <VxDatePicker v-model="value" type="month" />
</template>

Year Picker

Pick a year

vue

<template>
  <VxDatePicker v-model="value" type="year" />
</template>

Multiple Months

Pick multiple months. Tags collapse with +N by default.

Collapsed (default)

Select months

Show up to 3 tags

Select months

All tags (wrap)

Select months

vue

<template>
  <!-- Collapsed: "Jan 2026 +3" -->
  <VxDatePicker v-model="value" type="months" />

  <!-- Show 3 then collapse -->
  <VxDatePicker v-model="value" type="months" :max-tags="3" />

  <!-- All tags, wrapping -->
  <VxDatePicker v-model="value" type="months" :collapse-tags="false" />
</template>

Multiple Dates

Pick multiple individual dates. Click to toggle.

Collapsed

Select dates

All tags

Select dates

vue

<template>
  <VxDatePicker v-model="value" type="dates" />
  <VxDatePicker v-model="value" type="dates" :collapse-tags="false" />
</template>

Date / Range Switcher

Add rangeable to show a Date / Range tab switcher inside the calendar popover. In Date mode it works as a normal date picker and emits via v-model. In Range mode, the user picks a start and end date — the component emits update:from, update:to, and range-change events.

vue

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

const date = ref(null)
const from = ref(null)
const to = ref(null)
</script>

<template>
  <VxDatePicker
    v-model="date"
    v-model:from="from"
    v-model:to="to"
    rangeable
  />

  <!-- Date mode returns: "2026-03-15" via v-model -->
  <p v-if="date">Date selected: {{ date }}</p>

  <!-- Range mode returns: from/to via v-model:from / v-model:to -->
  <p v-if="from">Range: {{ from }} – {{ to }}</p>
</template>

How it works:

Mode	Output	Binding
Date (default tab)	Single date string	`v-model`
Range (second tab)	Start + end dates	`v-model:from`, `v-model:to`

v-model — bound to the single date value (Date tab)
v-model:from / v-model:to — two-way binding for range start/end dates
@range-change(from, to) — fires when a complete range is selected

Date Range Picker

Two-calendar range picker. Click to pick start, then end. Highlights the range between.

–

vue

<script setup>
const from = ref(null)
const to = ref(null)
</script>

<template>
  <VxDateRangePicker v-model:from="from" v-model:to="to" />
</template>

Range with Format

–

vue

<template>
  <VxDateRangePicker v-model:from="from" v-model:to="to" format="DD.MM.YYYY" />
</template>

Range with Disabled Dates

–

vue

<template>
  <VxDateRangePicker v-model:from="from" v-model:to="to" :disabled-date="isWeekend" />
</template>

Range with Quick Options

–

vue

<script setup>
const shortcuts = [
  { label: 'Last 7 days', value: () => { const e = new Date(); const s = new Date(); s.setDate(s.getDate() - 6); return [s, e] } },
  { label: 'Last 30 days', value: () => { const e = new Date(); const s = new Date(); s.setDate(s.getDate() - 29); return [s, e] } },
  { label: 'This month', value: () => { const now = new Date(); return [new Date(now.getFullYear(), now.getMonth(), 1), new Date(now.getFullYear(), now.getMonth() + 1, 0)] } },
]
</script>

<template>
  <VxDateRangePicker v-model:from="from" v-model:to="to" :shortcuts="shortcuts" />
</template>

Supported Formats

Format	Example	Description
`YYYY-MM-DD`	`2025-06-15`	ISO standard (default)
`DD.MM.YYYY`	`15.06.2025`	European dot
`DD-MM-YYYY`	`15-06-2025`	European dash
`DD/MM/YYYY`	`15/06/2025`	European slash
`MM/DD/YYYY`	`06/15/2025`	US format
`YYYY/MM/DD`	`2025/06/15`	Asian format
`M/D/YYYY`	`6/15/2025`	Short US (no padding)
`timestamp`	`1750032000000`	Unix milliseconds (valueFormat only)

Props

VxDatePicker

Prop	Type	Default	Description
`modelValue`	`string \| Date \| number \| null \| array`	`null`	Selected value (v-model)
`type`	`'date' \| 'week' \| 'month' \| 'year' \| 'dates' \| 'months'`	`'date'`	Picker mode
`placeholder`	`string`	`'Pick a date'`	Placeholder text
`format`	`string`	`'YYYY-MM-DD'`	Display format (DD.MM.YYYY, DD-MM-YYYY, etc.)
`valueFormat`	`string`	same as `format`	Format for v-model output. Use `'timestamp'` for Unix ms number
`disabled`	`boolean`	`false`	Disable picker
`clearable`	`boolean`	`true`	Show clear button
`editable`	`boolean`	`true`	Allow typing a date in the input
`mask`	`string`	auto from format	Input mask (`#` = digit, others literal). e.g. `##/##/####`
`collapseTags`	`boolean`	`true`	Collapse multi-select tags with +N
`maxTags`	`number`	`1`	Max visible tags before collapsing
`minDate`	`string \| Date \| null`	`null`	Minimum selectable date
`maxDate`	`string \| Date \| null`	`null`	Maximum selectable date
`disabledDate`	`(date: Date) => boolean`	—	Custom disabled date function
`disabledDates`	`(string \| Date \| number)[]`	`[]`	Array of specific dates to disable
`shortcuts`	`{ label: string, value: Date \| () => Date }[]`	`[]`	Quick pick options shown as sidebar
`firstDayOfWeek`	`number`	`1`	First day (0=Sun, 1=Mon)
`triggerClass`	`string \| string[] \| Record`	`''`	Custom trigger class
`triggerStyle`	`Record<string, string>`	—	Custom trigger styles

Events

Event	Type	Description
`update:modelValue`	`(value: string \| null) => void`	Date selected or cleared
`change`	`(value: string \| null) => void`	Date changed

VxDateRangePicker Props

Prop	Type	Default	Description
`from`	`string \| number \| null`	`null`	Start date (v-model:from)
`to`	`string \| number \| null`	`null`	End date (v-model:to)
`startPlaceholder`	`string`	`'Start date'`	Start input placeholder
`endPlaceholder`	`string`	`'End date'`	End input placeholder
`format`	`string`	`'YYYY-MM-DD'`	Display format
`valueFormat`	`string`	same as `format`	Output format (`'timestamp'` supported)
`separator`	`string`	`'–'`	Separator between dates
`disabled`	`boolean`	`false`	Disable picker
`clearable`	`boolean`	`true`	Show clear button
`minDate`	`string \| Date \| null`	`null`	Minimum date
`maxDate`	`string \| Date \| null`	`null`	Maximum date
`disabledDate`	`(date: Date) => boolean`	—	Custom disabled function
`firstDayOfWeek`	`number`	`1`	First day of week
`shortcuts`	`{ label: string, value: () => [Date, Date] }[]`	`[]`	Quick range options sidebar
`triggerClass`	`string`	`''`	Custom trigger class
`triggerStyle`	`Record<string, string>`	—	Custom trigger styles

Date Picker ​

With Initial Value ​

Custom Format ​

Masked Input ​

Value Format ​

Timestamp Value ​

Non-editable ​

Min / Max Date ​

Disabled Dates ​

Quick Options ​

Custom Shortcuts ​

Disabled Dates Array ​

Sunday First ​

Custom Trigger ​

Disabled ​

Week Picker ​

Month Picker ​

Year Picker ​

Multiple Months ​

Multiple Dates ​

Date / Range Switcher ​

Date Range Picker ​

Range with Format ​

Range with Disabled Dates ​

Range with Quick Options ​

Supported Formats ​

Props ​

VxDatePicker ​

Events ​

VxDateRangePicker Props ​

Date Picker

With Initial Value

Custom Format

Masked Input

Value Format

Timestamp Value

Non-editable

Min / Max Date

Disabled Dates

Quick Options

Custom Shortcuts

Disabled Dates Array

Sunday First

Custom Trigger

Disabled

Week Picker

Month Picker

Year Picker

Multiple Months

Multiple Dates

Date / Range Switcher

Date Range Picker

Range with Format

Range with Disabled Dates

Range with Quick Options

Supported Formats

Props

VxDatePicker

Events

VxDateRangePicker Props