Calendar

Компонент Calendar позволяет выбирать отдельные даты или диапазоны с расширенными возможностями настройки.

Базовое использование

Компонент Calendar используется для выбора дат и поддерживает различные варианты настройки.

Событие


<Calendar v-model="date"></Calendar>

Базовое использование компонента Calendar предполагает привязку свойства данных через директиву v-model. Эта директива автоматически синхронизирует значение календаря с указанным свойством данных, обеспечивая двустороннюю привязку.

Дополнительные параметры

Проп paramsDatePicker позволяет задать дополнительные параметры для поведения и форматирования выбора дат. Принимает объект с различными настройками.


<Calendar
    :paramsDatePicker="{ isRange: true, placeholder: 'Выберите диапазон дат' }"
    v-model="date">
</Calendar>

Автофокус

Проп autoFocus автоматически устанавливает фокус на поле ввода календаря при монтировании.


<Calendar
    autoFocus
    v-model="date">
</Calendar>

Предотвращение закрытия

Проп isNotCloseOnDateChange предотвращает закрытие календаря при выборе даты.


<Calendar
    isNotCloseOnDateChange
    v-model="date">
</Calendar>

Позиционирование окна

Проп paramsFixWindow позволяет настроить поведение позиционирования окна календаря.


<Calendar
    :paramsFixWindow="{ position: 'bottom-left', marginPx: 10 }"
    v-model="date">
</Calendar>

Пользовательские CSS-стили

Класс для элемента выбора даты

Проп classDataPicker позволяет применить пользовательские CSS-классы к элементу выбора даты.


<Calendar
    classDataPicker="custom-data-picker-class"
    v-model="date">
</Calendar>

Класс для элемента календаря

Проп classPicker позволяет применить пользовательские CSS-классы к элементу календаря.


<Calendar
    classPicker="custom-calendar-picker-class"
    v-model="date">
</Calendar>

Класс для текста даты

Проп classDateText позволяет применить пользовательские CSS-классы к отображаемому тексту даты.


<Calendar
    classDateText="custom-date-text-class"
    v-model="date">
</Calendar>