SwDatePicker
Компонент SwDatePicker представляет собой панель с календарем.
Свойства / Properties
| Имя | Тип | По умолчанию | Значения/Описание |
|---|---|---|---|
data | Object | new Date() | Начальные данные - диапазон ( при 'solid' - используется только 'startDate') изначальных выбранных дат {firstDate: '01-04-2025', endDate: '14-04-2025', startDate:'30-03-2025', holiday: { preholidays: ["2020-03-30"], holidays: ["2020-03-30"], holiday: ["2020-03-30"], nowork: ["2020-03-30"] }}, ограничение не более 2х месяцев. firstDate - выбор месяца календаря при отсутствии startDate |
limitation | Boolean, Array | false | Массив ограничений дат: [{endDate: '14-04-2025', startDate:'30-03-2025'}]. |
range | String | solid | Тип календаря: 'decades','year','range', 'solid'. |
События / Events
input - событие выбора с данными {dateStart: "11.11.2011", dateEnd: "14-12-2011" ( при range), count: 1 }
Слоты / Slots
#double-arrow - для двойной стрелки по умолчанию «
#arrow - для одинарной стрелки по умолчанию ‹
Особенности реализации
- Поддержка множественных режимов отображения: дни, месяцы, годы, десятилетия
- Автоматическая подсветка праздников и выходных дней
- Интеллектуальная фильтрация недоступных дат
- Проверка пересечения диапазонов ограничений
- Поддержка инвертированных диапазонов (когда endDate < startDate)
- Локализация названий месяцев и дней недели
Пример использования / Example Usage
<script>const addDateStart = (date) => {console.log(date)}</script>
<sw-date-picker
:data="{startDate: '11.11.2011' endDate: '14-12-2011'}"
limitation=" [{endDate: '14-04-2025', startDate:'30-03-2025'}]"
range="range"
@input="addDateStart"
>
<template #double-arrow>«</template>
<template #arrow>‹</template>
</sw-date-picker>