Логотип Volt UI

Date Picker

Примітиви календаря для вибору дати та діапазону.

Використання

ПереглядКод
‹ May 2026 ›
SuMoTuWeThFrSa
26 27 28 29 30 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31 1 2 3 4 5 6

Довідник API

VoltDatePickerCell — volt-date-picker-cell

ВхідТипЗа замовчуванням
class string ''

VoltDatePickerDateButton — volt-date-picker-date-button

ВхідТипЗа замовчуванням
class string ''

VoltDatePickerGrid — volt-date-picker-grid

ВхідТипЗа замовчуванням
class string ''

VoltDatePickerLabel — volt-date-picker-label

ВхідТипЗа замовчуванням
class string ''
id string —
aria-live string 'polite'

VoltDatePickerNextMonth — volt-date-picker-next-month

ВхідТипЗа замовчуванням
class string ''

VoltDatePickerPreviousMonth — volt-date-picker-previous-month

ВхідТипЗа замовчуванням
class string ''

VoltDatePicker — volt-date-picker

ВхідТипЗа замовчуванням
class string ''
min Date —
max Date —
disabled boolean false
dateDisabled (date: Date) => boolean () => false
firstDayOfWeek VoltDatePickerFirstDayOfWeek 7
date Date | undefined —
focusedDate Date | undefined —
ВихідТип
dateChangeDate | undefined
focusedDateChangeDate | undefined

VoltDateRangePicker — volt-date-range-picker

ВхідТипЗа замовчуванням
class string ''
min Date —
max Date —
disabled boolean false
dateDisabled (date: Date) => boolean () => false
firstDayOfWeek VoltDatePickerFirstDayOfWeek 7
startDate Date | undefined —
endDate Date | undefined —
focusedDate Date | undefined —
ВихідТип
startDateChangeDate | undefined
endDateChangeDate | undefined
focusedDateChangeDate | undefined

Код компонента

Встановити через CLI:npx @voltui/cli add date-picker
TypeScript
Завантаження редактора…

Скопіюйте цей код у свій проєкт. Компонент використовує ng-primitives/date-picker.