SwDatePicker
Компонент SwDatePicker представляет собой панель с календарем.
Свойства / Properties
| Имя | Тип | По умолчанию | Значения/Описание |
|---|---|---|---|
data | Object | new Date() | Начальные данные — диапазон (при 'solid' только 'startDate'): { firstDate, startDate, endDate, holiday: { weekend, preholiday, holiday, nowork } }. firstDate — месяц при отсутствии startDate. Deprecated в holiday (удалить в major): holidays → weekend, preholidays → preholiday. |
limitation | Boolean, Array | false | Ограничения недоступных дат. Элементы работают по-разному: только endDate — всё ≤ даты; только startDate — всё ≥ даты; оба поля — закрытый диапазон (или инвертированный, если endDate < startDate). Пример: [{ endDate: '14-04-2025' }, { startDate: '01-09-2025' }, { startDate: '30-03-2025', endDate: '14-04-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 - для одинарной стрелки по умолчанию ‹
Особенности реализации
- Поддержка множественных режимов отображения: дни, месяцы, годы, десятилетия
- Автоматическая подсветка праздников и выходных дней
- Интеллектуальная фильтрация недоступных дат (одиночные границы и диапазоны в
limitation) - Даты из
limitationнельзя выбрать; в режимеrangeнельзя выделить интервал через заблокированные дни - Проверка пересечения диапазонов ограничений
- Поддержка инвертированных диапазонов (когда endDate < startDate)
- Локализация названий месяцев и дней недели
Пример использования / Example Usage
<script setup>
import { ref } from 'vue'
const pad = (n) => String(n).padStart(2, '0')
const fmt = (d) => `${pad(d.getDate())}-${pad(d.getMonth() + 1)}-${d.getFullYear()}`
const today = new Date()
const monthMid = new Date(today.getFullYear(), today.getMonth(), 15)
const monthEnd = new Date(today.getFullYear(), today.getMonth() + 1, 0)
const nextMonthStart = new Date(today.getFullYear(), today.getMonth() + 1, 1)
const datePickerSolid = ref({ firstDate: fmt(today) })
const datePickerRange = ref({
firstDate: fmt(today),
startDate: fmt(monthMid),
endDate: fmt(new Date(today.getFullYear(), today.getMonth(), Math.min(22, monthEnd.getDate())))
})
const datePickerLimitation = ref([
{ endDate: fmt(new Date(today.getFullYear(), today.getMonth(), 3)) },
{ startDate: fmt(new Date(nextMonthStart.getFullYear(), nextMonthStart.getMonth(), 25)) },
{
startDate: fmt(new Date(today.getFullYear(), today.getMonth(), 10)),
endDate: fmt(new Date(today.getFullYear(), today.getMonth(), 12))
}
])
</script>
<!-- solid — одна дата -->
<sw-date-picker
:data="datePickerSolid"
:limitation="datePickerLimitation"
range="solid"
/>
<!-- range — интервал -->
<sw-date-picker
:data="datePickerRange"
:limitation="datePickerLimitation"
range="range"
/>