Date Picker

Oy/yil navigatsiyasi, bugun tugmasi, min/max chegaralari va maxsus o'chirilgan sanalar bilan kalendar asosidagi sana tanlash komponenti.

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

Ko'rsatiladigan format va qiymat formati farqlanishi mumkin. 15.06.2025 ko'rinishida sana kiriting — u to'g'ri tahlil qilinadi.

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

Yozish davomida ajratuvchilarni avtomatik qo'yadi. Mask format asosida avtomatik yaratiladi yoki uni qo'lda belgilash mumkin.

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

Bir formatda ko'rsatib, v-model ga boshqa formatdagi qiymatni yuborish mumkin.

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

v-model qiymatini Unix millisekund soni sifatida olish uchun value-format="timestamp" ni belgilang.

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

Qo'lda yozishni o'chiradi — faqat kalendardan tanlashga ruxsat beradi.

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

O'tgan sanalarni yoki dam olish kunlarini maxsus funksiya orqali o'chirib qo'ying.

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

Tez tanlov paneli kalendarning chap tomonida paydo bo'ladi.

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

Ma'lum sanalar uchun qat'iy belgilangan Date obyektlarini uzating.

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

O'chirib qo'yiladigan aniq sanalar massivini uzating.

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

Butun bir haftani tanlaydi. Trigger ichida hafta raqamini ko'rsatadi.

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

Bir nechta oyni tanlang. Teglar sukut bo'yicha +N ko'rinishida yig'iladi.

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

Bir nechta alohida sanani tanlang. Bosish orqali ulang/o'chiring.

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

Kalendar popover ichida Date / Range tab almashtirgichini ko'rsatish uchun rangeable ni qo'shing. Date rejimida u oddiy sana tanlovchi sifatida ishlaydi va v-model orqali qiymat yuboradi. Range rejimida foydalanuvchi boshlanish va tugash sanalarini tanlaydi — komponent update:from, update:to va range-change hodisalarini chiqaradi.

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>

Qanday ishlaydi:

Mode	Output	Binding
Date (asosiy tab)	Yagona sana satri	`v-model`
Range (ikkinchi tab)	Boshlanish + tugash sanalari	`v-model:from`, `v-model:to`

v-model — yagona sana qiymatiga bog'lanadi (Date tab)
v-model:from / v-model:to — oraliq boshlanish/tugash sanalarini ikki tomonlama bog'lash
@range-change(from, to) — to'liq oraliq tanlanganda ishga tushadi

Date Range Picker

Ikki kalendarli oraliq tanlovchi. Avval boshlanish sanasini, keyin tugash sanasini bosing. O'rtadagi oraliq ajratib ko'rsatiladi.

–

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 standart (sukut)
`DD.MM.YYYY`	`15.06.2025`	Yevropa nuqtali ko'rinishi
`DD-MM-YYYY`	`15-06-2025`	Yevropa chiziqli ko'rinishi
`DD/MM/YYYY`	`15/06/2025`	Yevropa slashli ko'rinishi
`MM/DD/YYYY`	`06/15/2025`	AQSh formati
`YYYY/MM/DD`	`2025/06/15`	Osiyo formati
`M/D/YYYY`	`6/15/2025`	Qisqa AQSh (nolsiz)
`timestamp`	`1750032000000`	Unix millisekundlari (faqat valueFormat uchun)

Props

VxDatePicker

Prop	Type	Default	Description
`modelValue`	`string \| Date \| number \| null \| array`	`null`	Tanlangan qiymat (v-model)
`type`	`'date' \| 'week' \| 'month' \| 'year' \| 'dates' \| 'months'`	`'date'`	Tanlovchi rejimi
`placeholder`	`string`	`'Pick a date'`	Placeholder matni
`format`	`string`	`'YYYY-MM-DD'`	Ko'rsatiladigan format (DD.MM.YYYY, DD-MM-YYYY va h.k.)
`valueFormat`	`string`	same as `format`	v-model chiqishi uchun format. Unix ms soni uchun `'timestamp'` dan foydalaning
`disabled`	`boolean`	`false`	Tanlovchini o'chirish
`clearable`	`boolean`	`true`	Tozalash tugmasini ko'rsatish
`editable`	`boolean`	`true`	Kiritish maydoniga sanani qo'lda yozishga ruxsat berish
`mask`	`string`	auto from format	Kiritish maski (`#` = raqam, qolganlari literal). masalan `##/##/####`
`collapseTags`	`boolean`	`true`	Ko'p tanlov teglarini +N bilan yig'ish
`maxTags`	`number`	`1`	Yig'ilishdan oldin ko'rinadigan maksimal teglar soni
`minDate`	`string \| Date \| null`	`null`	Tanlash mumkin bo'lgan eng kichik sana
`maxDate`	`string \| Date \| null`	`null`	Tanlash mumkin bo'lgan eng katta sana
`disabledDate`	`(date: Date) => boolean`	—	Sanalarni o'chirish uchun maxsus funksiya
`disabledDates`	`(string \| Date \| number)[]`	`[]`	O'chiriladigan aniq sanalar massivi
`shortcuts`	`{ label: string, value: Date \| () => Date }[]`	`[]`	Yon panelda ko'rsatiladigan tezkor tanlov variantlari
`firstDayOfWeek`	`number`	`1`	Haftaning birinchi kuni (0=Yak, 1=Du)
`triggerClass`	`string \| string[] \| Record`	`''`	Trigger uchun maxsus class
`triggerStyle`	`Record<string, string>`	—	Trigger uchun maxsus stillar

Events

Event	Type	Description
`update:modelValue`	`(value: string \| null) => void`	Sana tanlandi yoki tozalandi
`change`	`(value: string \| null) => void`	Sana o'zgardi

VxDateRangePicker Props

Prop	Type	Default	Description
`from`	`string \| number \| null`	`null`	Boshlanish sanasi (v-model:from)
`to`	`string \| number \| null`	`null`	Tugash sanasi (v-model:to)
`startPlaceholder`	`string`	`'Start date'`	Boshlanish kiritishi placeholderi
`endPlaceholder`	`string`	`'End date'`	Tugash kiritishi placeholderi
`format`	`string`	`'YYYY-MM-DD'`	Ko'rsatiladigan format
`valueFormat`	`string`	same as `format`	Chiqish formati (`'timestamp'` qo'llab-quvvatlanadi)
`separator`	`string`	`'–'`	Sanalar orasidagi ajratuvchi
`disabled`	`boolean`	`false`	Tanlovchini o'chirish
`clearable`	`boolean`	`true`	Tozalash tugmasini ko'rsatish
`minDate`	`string \| Date \| null`	`null`	Eng kichik sana
`maxDate`	`string \| Date \| null`	`null`	Eng katta sana
`disabledDate`	`(date: Date) => boolean`	—	O'chirish uchun maxsus funksiya
`firstDayOfWeek`	`number`	`1`	Haftaning birinchi kuni
`shortcuts`	`{ label: string, value: () => [Date, Date] }[]`	`[]`	Yon paneldagi tezkor oraliq variantlari
`triggerClass`	`string`	`''`	Trigger uchun maxsus class
`triggerStyle`	`Record<string, string>`	—	Trigger uchun maxsus stillar

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