Date Picker

Календарный выбор даты с навигацией по месяцам и годам, кнопкой «сегодня», ограничениями min/max и пользовательскими отключёнными датами.

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

Формат отображения и формат значения могут различаться. Введите дату вроде 15.06.2025 — она корректно разбирается.

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

Автоматически вставляет разделители по мере ввода. Маска генерируется из формата автоматически или задаётся вручную.

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

Отображайте один формат, а в 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

Укажите value-format="timestamp", чтобы получать в v-model число Unix-миллисекунд.

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

Запретить ввод с клавиатуры — выбор только через календарь.

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

Отключайте прошедшие даты или выходные с помощью своей функции.

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

Панель быстрых действий отображается слева от календаря.

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

Передавайте фиксированные объекты Date для известных дат.

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

Передайте массив конкретных дат, которые нужно отключить.

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

Выбирает целую неделю. В триггере отображается номер недели.

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

Выбор нескольких месяцев. По умолчанию теги сворачиваются с индикатором +N.

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

Выбор нескольких отдельных дат. Клик — переключение.

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

Добавьте rangeable, чтобы внутри поповера календаря появился переключатель вкладок Date / Range. В режиме Date работает как обычный выбор даты и обновляет v-model. В режиме Range пользователь выбирает начальную и конечную даты — компонент генерирует события update:from, update:to и range-change.

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>

Как это работает:

Mode	Output	Binding
Date (вкладка по умолчанию)	Строка с одной датой	`v-model`
Range (вторая вкладка)	Начальная и конечная даты	`v-model:from`, `v-model:to`

v-model — привязка к одному значению даты (вкладка Date)
v-model:from / v-model:to — двустороннее связывание с началом/концом диапазона
@range-change(from, to) — срабатывает при выборе полного диапазона

Date Range Picker

Выбор диапазона с двумя календарями. Кликните сначала по началу, затем по концу. Диапазон между ними подсвечивается.

–

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 (по умолчанию)
`DD.MM.YYYY`	`15.06.2025`	Европейский с точкой
`DD-MM-YYYY`	`15-06-2025`	Европейский с дефисом
`DD/MM/YYYY`	`15/06/2025`	Европейский со слешем
`MM/DD/YYYY`	`06/15/2025`	Формат США
`YYYY/MM/DD`	`2025/06/15`	Азиатский формат
`M/D/YYYY`	`6/15/2025`	Краткий US (без ведущих нулей)
`timestamp`	`1750032000000`	Unix-миллисекунды (только в valueFormat)

Props

VxDatePicker

Prop	Type	Default	Description
`modelValue`	`string \| Date \| number \| null \| array`	`null`	Выбранное значение (v-model)
`type`	`'date' \| 'week' \| 'month' \| 'year' \| 'dates' \| 'months'`	`'date'`	Режим выбора
`placeholder`	`string`	`'Pick a date'`	Текст-подсказка
`format`	`string`	`'YYYY-MM-DD'`	Формат отображения (DD.MM.YYYY, DD-MM-YYYY и т. д.)
`valueFormat`	`string`	same as `format`	Формат для v-model. Используйте `'timestamp'` для Unix-миллисекунд
`disabled`	`boolean`	`false`	Отключить выбор
`clearable`	`boolean`	`true`	Показывать кнопку очистки
`editable`	`boolean`	`true`	Разрешить ввод даты в поле
`mask`	`string`	auto from format	Маска ввода (`#` — цифра, остальное — буквально). Например, `##/##/####`
`collapseTags`	`boolean`	`true`	Сворачивать теги мультивыбора в +N
`maxTags`	`number`	`1`	Макс. число видимых тегов до сворачивания
`minDate`	`string \| Date \| null`	`null`	Минимально допустимая дата
`maxDate`	`string \| Date \| null`	`null`	Максимально допустимая дата
`disabledDate`	`(date: Date) => boolean`	—	Функция, отключающая даты
`disabledDates`	`(string \| Date \| number)[]`	`[]`	Массив конкретных дат для отключения
`shortcuts`	`{ label: string, value: Date \| () => Date }[]`	`[]`	Варианты быстрого выбора в боковой панели
`firstDayOfWeek`	`number`	`1`	Первый день недели (0 = Вс, 1 = Пн)
`triggerClass`	`string \| string[] \| Record`	`''`	Пользовательский класс триггера
`triggerStyle`	`Record<string, string>`	—	Пользовательские стили триггера

Events

Event	Type	Description
`update:modelValue`	`(value: string \| null) => void`	Дата выбрана или очищена
`change`	`(value: string \| null) => void`	Значение изменилось

VxDateRangePicker Props

Prop	Type	Default	Description
`from`	`string \| number \| null`	`null`	Начальная дата (v-model:from)
`to`	`string \| number \| null`	`null`	Конечная дата (v-model:to)
`startPlaceholder`	`string`	`'Start date'`	Подсказка для поля начала
`endPlaceholder`	`string`	`'End date'`	Подсказка для поля конца
`format`	`string`	`'YYYY-MM-DD'`	Формат отображения
`valueFormat`	`string`	same as `format`	Формат значения (поддерживается `'timestamp'`)
`separator`	`string`	`'–'`	Разделитель между датами
`disabled`	`boolean`	`false`	Отключить выбор
`clearable`	`boolean`	`true`	Показывать кнопку очистки
`minDate`	`string \| Date \| null`	`null`	Минимальная дата
`maxDate`	`string \| Date \| null`	`null`	Максимальная дата
`disabledDate`	`(date: Date) => boolean`	—	Функция отключения дат
`firstDayOfWeek`	`number`	`1`	Первый день недели
`shortcuts`	`{ label: string, value: () => [Date, Date] }[]`	`[]`	Быстрый выбор диапазонов в боковой панели
`triggerClass`	`string`	`''`	Пользовательский класс триггера
`triggerStyle`	`Record<string, string>`	—	Пользовательские стили триггера

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