Календарь Vue3

Календарь Vue, также известный как DatePicker, представляет собой компонент ввода, который предоставляет предложения в режиме реального времени при вводе. Он поддерживает Vue 3 с PrimeVue 3 и Vue 2 с PrimeVue 2.

Настраивать

Обратитесь к документации по установке PrimeVue, чтобы узнать о шагах по загрузке и установке для вашей среды, такой как Vue CLI, Vite или браузер.

Импортировать

import Calendar from 'primevue/calendar';

Начиная

Двусторонняя привязка значений определяется с помощью стандартной директивы v-модели, ссылающейся на свойство 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 - день месяца (без нуля в начале)
dd - день месяца (две цифры)
o - день года (без ведущих нулей)
oo - день года (трехзначный)
D - название дня короткое
DD - название дня длинное
m - месяц года (без нуля в начале)
мм - месяц года (две цифры)
M - краткое название месяца
MM - полное название месяца
y - год (две цифры)
гг - год (четыре цифры)
@ - временная метка Unix (мс с 01.01.1970)
! - Галочки Windows (100нс с 01.01.10001)
‘…’ - буквальный текст
‘’ - одинарная кавычка
что-нибудь еще - буквальный текст

<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" />

Locale

Локаль для разных языков и форматов определяется глобально, см. Конфигурацию 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" />

Тематика

Календарь поддерживает различные темы, включая Материал, Bootstrap, Fluent, а также ваши собственные темы с помощью инструмента Дизайнер.

Ресурсы

Посетите витрину PrimeVue Calendar для демонстраций и документации.

Календарь Vue3