Календарь

Календарь в виде месячного вида. Переиспользует алгоритм месячной сетки из core DatePicker; поддерживает ограничения диапазона и навигацию по сетке стрелками.

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

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

окт. 2026

вспнвтсрчтптсб

<script setup>
import { ref } from 'vue'
const date = ref(new Date())
</script>

<template>
  <LhCalendar v-model="date" />
</template>

<script>
export default {
  data() {
    return { date: new Date() }
  },
}
</script>

<template>
  <LhCalendar v-model="date" />
</template>

Диапазон и множественный выбор

selection поддерживает три режима: 'single' (по умолчанию) / 'range' (начало и конец фиксируются двумя кликами) / 'multiple' (переключение нескольких дат кликами).

Диапазон

окт. 2026

вспнвтсрчтптсб

нояб. 2026

вспнвтсрчтптсб

<script setup>
import { ref } from 'vue'
const span = ref([new Date(2026, 8, 5), new Date(2026, 8, 20)])
</script>

<template>
  <LhCalendar v-model="span" selection="range" :panels="2" />
</template>

<script>
export default {
  data() {
    return { span: [new Date(2026, 8, 5), new Date(2026, 8, 20)] }
  },
}
</script>

<template>
  <LhCalendar v-model="span" selection="range" :panels="2" />
</template>

Множественный выбор

окт. 2026

вспнвтсрчтптсб

<script setup>
import { ref } from 'vue'
const dates = ref([new Date(2026, 8, 10)])
</script>

<template>
  <LhCalendar v-model="dates" selection="multiple" />
</template>

<script>
export default {
  data() {
    return { dates: [new Date(2026, 8, 10)] }
  },
}
</script>

<template>
  <LhCalendar v-model="dates" selection="multiple" />
</template>

Ограничение выбираемого диапазона

Ограничение диапазона

окт. 2026

вспнвтсрчтптсб

<script setup>
import { ref } from 'vue'

// Внимание: в JS месяцы отсчитываются с 0, new Date(2026, 8, 1) — это 1 сентября
const range = [new Date(2026, 8, 1), new Date(2026, 8, 28)]
const rangeDate = ref(new Date())
</script>

<template>
  <LhCalendar v-model="rangeDate" :range="range" />
</template>

<script>
export default {
  data() {
    return {
      // Внимание: в JS месяцы отсчитываются с 0, new Date(2026, 8, 1) — это 1 сентября
      range: [new Date(2026, 8, 1), new Date(2026, 8, 28)],
      rangeDate: new Date(),
    }
  },
}
</script>

<template>
  <LhCalendar v-model="rangeDate" :range="range" />
</template>

Свёрнутая форма input

mode="input" убирает постоянно отображаемую панель в поле ввода: она разворачивается по клику, что экономит вертикальное пространство. panels задаёт число месячных панелей после разворачивания, placeholder — плейсхолдер, а close-on-select определяет, сворачивать ли панель после выбора.

Форма input + две панели

окт. 2026

вспнвтсрчтптсб

нояб. 2026

вспнвтсрчтптсб

<script setup>
import { ref } from 'vue'
const inputDate = ref(new Date())
</script>

<template>
  <LhCalendar
    v-model="inputDate"
    mode="input"
    :panels="2"
    placeholder="Выберите дату"
  />
</template>

<script>
export default {
  data() {
    return { inputDate: new Date() }
  },
}
</script>

<template>
  <LhCalendar
    v-model="inputDate"
    mode="input"
    :panels="2"
    placeholder="Выберите дату"
  />
</template>

Не сворачивать после выбора

окт. 2026

вспнвтсрчтптсб

<script setup>
import { ref } from 'vue'
const inputDate2 = ref(new Date())
</script>

<template>
  <LhCalendar
    v-model="inputDate2"
    mode="input"
    :close-on-select="false"
    placeholder="После выбора панель остаётся открытой"
  />
</template>

<script>
export default {
  data() {
    return { inputDate2: new Date() }
  },
}
</script>

<template>
  <LhCalendar
    v-model="inputDate2"
    mode="input"
    :close-on-select="false"
    placeholder="После выбора панель остаётся открытой"
  />
</template>

API

LhCalendar Props

Свойство	Описание	Тип	По умолчанию
modelValue	Текущая выбранная дата (управляемый v-model)	Date | Date[]	—
selection	Режим выбора: одиночный (по умолчанию) / диапазон (начало и конец) / множественный	"single" | "range" | "multiple"	'single'
range	Ограничение выбираемого диапазона дат	[Date, Date]	—
mode	Форма отображения	"panel" | "input"	'panel'
panels	Число одновременно отображаемых месячных панелей (располагаются в flex-строки)	number	1
placeholder	Плейсхолдер для режима input	string	—
closeOnSelect	Автоматически сворачивать ли панель после выбора в режиме input	boolean	true
sx	Сокращённые свойства компоновки sx	LhSxProps	—

Events

Событие	Описание	Параметр обратного вызова
update:modelValue	Срабатывает при изменении выбранного значения (v-model)	(value: Date | Date[])
change	Срабатывает при изменении выбранного значения	(value: Date | Date[])
select	Срабатывает при выборе даты (кликом или с клавиатуры)	(value: Date)

Слоты: cell (пользовательская ячейка), header (шапка).

Доступность

• Сеточная семантика role="grid" (строки row, ячейки gridcell), текущий день помечается aria-current="date"
• Стрелки перемещают фокус по датам (±1 день / ±7 дней), Home/End — в начало/конец строки, PageUp/Down — листают месяцы; реализация соответствует шаблону APG grid
• Даты вне диапазона выводятся как нативные disabled и исключаются из взаимодействия

Типы

TypeScript-типы, экспортируемые этим компонентом (извлечены автоматически из packages/components/calendar/src/types.ts и исходников @lh-ui/share/core/*; раскройте нужный пункт, чтобы увидеть полное определение; описания свойств — в таблице Props выше):

LhCalendarMode

/** Форма отображения: panel — постоянно открытая панель (по умолчанию) / input — свёрнутая панель, разворачивается по клику в поле ввода */
export type LhCalendarMode = 'panel' | 'input'

LhCalendarValue

/** Форма управляемого значения меняется в зависимости от selection: одиночный — Date / диапазон — Date[] (длина 2, начало и конец) / множественный — Date[].
 *  Используется не кортеж [Date, Date]: компилятор SFC не может вывести runtime-тип из кортежа, что привело бы к предупреждению валидации prop */
export type LhCalendarValue = Date | Date[]

LhCalendarProps

export interface LhCalendarProps {
  /** Текущее выбранное значение (управляемый v-model; если не передано, состояние выбора поддерживается внутри компонента) */
  modelValue?: LhCalendarValue
  /** Режим выбора: одиночный (по умолчанию) / диапазон (начало и конец) / множественный */
  selection?: LhCalendarSelection
  /** Ограничение выбираемого диапазона дат */
  range?: LhCalendarRange
  /** Форма отображения: panel — постоянно открытая панель (по умолчанию) / input — свёрнутая панель, разворачивается по клику в поле ввода */
  mode?: LhCalendarMode
  /** Число одновременно отображаемых месячных панелей (располагаются в flex-строки) */
  panels?: number
  /** Плейсхолдер для режима input */
  placeholder?: string
  /** Автоматически сворачивать ли панель после выбора в режиме input */
  closeOnSelect?: boolean
  /** Сокращённые свойства компоновки sx */
  sx?: LhSxProps
}

LhCalendarSelection _{(из @lh-ui/share/core/calendar)}

/** Режим выбора: одиночный / диапазон (начало и конец) / множественный */
export type LhCalendarSelection = 'single' | 'range' | 'multiple'

LhCalendarRange _{(из @lh-ui/share/core/calendar)}

/** Ограничение выбираемого диапазона дат */
export type LhCalendarRange = [Date, Date]