Календарь Vue, также известный как DatePicker, представляет собой компонент ввода, который предоставляет предложения в реальном времени при вводе. Он поддерживает Vue 3 с PrimeVue 3 и Vue 2 с PrimeVue 2.
Настраивать
См. Документацию по установке PrimeVue для загрузки и установки для вашей среды, такой как Vue CLI, Vite или браузер.
Импортировать
import Calendar from 'primevue/calendar';Начиная
Двусторонняя привязка значений определяется с помощью стандартной директивы v-model, ссылающейся на свойство Date.
<Calendar v-model="value" />export default { data() { return { value: null } } }
Всплывающее и встроенное
Календарь отображается во всплывающем окне по умолчанию, и встроенное свойство должно быть включено для встроенного режима.
<Calendar v-model="value" :inline="true" />Режим выбора
По умолчанию календарь позволяет выбрать только одну дату, тогда как можно выбрать несколько дат, установив для selectionMode значение несколько. В этом случае календарь обновляет значение массивом дат, где количество выбираемых дат может быть ограничено свойством maxDateCount. Третьим вариантом является режим диапазона, который позволяет выбирать диапазон на основе массива из двух значений, где первое значение является датой начала, а второе значение — датой окончания.
<Calendar v-model="value" selectionMode="single || multiple || range" />Формат даты
Формат даты по умолчанию — мм/дд/гг. Для настройки этого параметра используйте свойство dateFormat или задайте его в PrimeVue Locale глобально. Обратите внимание, что автономное свойство переопределяет значение в настройках локали.
Следующие параметры могут быть частью формата.
- d — день месяца (без ведущего нуля)
- дд — день месяца (две цифры)
- o — день года (без лидирующих нулей)
- oo — день года (три цифры)
- Д — краткое название дня
- ДД — длинное название дня
- m — месяц года (без ведущего нуля)
- мм — месяц года (две цифры)
- M — краткое название месяца
- MM — длинное название месяца
- г — год (две цифры)
- гг — год (четыре цифры)
- @ — временная метка Unix (мс с 01.01.1970)
- ! — тики Windows (100 нс с 01.01.0001)
- ‘…’ — буквальный текст
- '' — одинарная кавычка
- все остальное — буквальный текст
<Calendar v-model="value" dateFormat="dd.mm.yy" />Время
TimePicker включается с помощью свойства showTime, а 24-часовой (по умолчанию) или 12-часовой режим настраивается с помощью параметра hourFormat. Если вам нужно использовать средство выбора времени как автономное, используйте свойство timeOnly.
<Calendar v-model="value" :showTime="true" />
<Calendar v-model="value" :showTime="true" hourFormat="12" />
<Calendar v-model="value" :showTime="true" :timeOnly="true" />Ограничение по дате
Чтобы отключить ввод дат вручную, установите для параметра manualInput значение true и ограничьте выбор дат с помощью параметров minDate и maxDate.
<Calendar v-model="value" :minDate="minDateValue" maxDate="maxDateValue" />Чтобы отключить определенные даты или дни, ограничьте выбираемые даты с помощью параметров disabledDates и/или disabledDays.
<Calendar v-model="value" :disabledDates="invalidDates" :disabledDays="[0,6]" />Панель кнопок
Панель кнопок отображается сегодня, а кнопки очистки включаются с помощью свойства showButtonBar.
<Calendar v-model="value" :showButtonBar="true" />Несколько месяцев
Отображение нескольких месяцев включается путем установки для свойства numberOfMonths значения больше 1.
<Calendar v-model="value" :numberOfMonths="3" />Регион
Локаль для разных языков и форматов определяется глобально. Дополнительную информацию см. в конфигурации PrimeVue Locale.
Пользовательский контент
Пользовательский интерфейс календаря принимает настраиваемый контент с использованием шаблонов верхнего и нижнего колонтитула.
<Calendar v-model="value">
<template #header>Header Content</template>
<template #footer>Footer Content</template>
</Calendar>Кроме того, содержимое ячейки может быть оформлено с использованием шаблона с именем «дата». Это удобная функция для выделения конкретных дат. Обратите внимание, что свойство даты реквизитов слота, переданных в шаблон, является не экземпляром даты, а объектом метаданных для представления даты со свойствами «день», «месяц» и «год». Пример ниже меняет цвет фона дат между 10 и 15 числом каждого месяца.
<Calendar v-model="value"> <template #date="slotProps"> <strong v-if="slotProps.date.day > 10 && slotProps.date.day < 15" class="special-day">{{slotProps.date.day}}</strong> <template v-else>{{slotProps.date.day}}}</template> </template> </Calendar>.special-day { text-decoration: line-through; }
Выбор месяца
Средство выбора месяца используется для выбора только месяца и года без даты, установите режим просмотра «месяц», чтобы активировать средство выбора месяца.
<Calendar v-model="value" view="month" dateFormat="mm/yy" :yearNavigator="true" yearRange="2000:2030" />Сенсорный интерфейс
В режиме сенсорного пользовательского интерфейса в центре экрана отображается наложение календаря, оптимизированное для сенсорных устройств.
<Calendar v-model="value" :touchUI="true" />Тематика
Календарь поддерживает различные темы, включая Material, Bootstrap, Fluent, а также ваши собственные темы с помощью инструмента Дизайнер.
Ресурсы
Посетите витрину PrimeVue Календарь, чтобы ознакомиться с демонстрационными примерами и документацией.
