Выбор даты

Селектор даты. Пять режимов: date / month / year / datetime / range. Внутри панели можно пошагово углубляться (день → месяц → год); в режиме datetime под календарём располагается колонка времени (часы/минуты/секунды, переключение колесом или кликом, при подтверждении объединяется с датой); range — выбор из двух шагов (первый клик задаёт и подсвечивает начальную точку, второй нормализует диапазон и подсвечивает дни между); панель монтируется в body, формат отображения управляется format.

Выбор даты

<template>
  <div class="demo-col" style="gap: 16px">
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhDatePicker v-model="date" placeholder="Выберите дату" format="dd.MM.yyyy" clearable />
      <LhDatePicker v-model="month" mode="month" placeholder="Выберите месяц" size="small" />
      <LhDatePicker v-model="year" mode="year" placeholder="Выберите год" size="large" />
      <LhDatePicker v-model="datetime" mode="datetime" placeholder="Выберите дату и время" disabled />
      <LhDatePicker v-model="date" placeholder="Только чтение" readonly />
    </div>
    <LhDatePicker
      v-model="range"
      mode="range"
      range-separator="по"
      placeholder="Выберите диапазон дат (два клика)"
      :cell-class-name="cellClass"
      popper-class="demo-popper"
    />
    <p class="demo-note">
      Дата: {{ fmt(date) }} | Месяц: {{ fmt(month) }} | Год: {{ fmt(year) }} | Дата и время: {{ fmt(datetime) }}
    </p>
    <p class="demo-note">Диапазон дат (rangeSeparator="по", выходные выделены красным): {{ fmtRange(range) }}</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    date: new Date(2026, 9, 3),
    month: new Date(2026, 9, 1),
    year: new Date(2026, 0, 1),
    datetime: null,
    range: null,
  }),
  methods: {
    fmt(v) {
      return v instanceof Date ? v.toLocaleString('ru-RU', { hour12: false }) : '(не выбрано)'
    },
    fmtRange(v) {
      if (!Array.isArray(v) || v.length !== 2) return '(не выбрано)'
      const [a, b] = v
      const s = (d) => (d instanceof Date ? d.toLocaleString('ru-RU', { hour12: false }) : '(не выбрано)')
      return `${s(a)} ~ ${s(b)}`
    },
    cellClass(date) {
      return date.getDay() === 0 || date.getDay() === 6 ? 'demo-cell-weekend' : ''
    },
  },
}
</script>

Props

Проп	Описание	Тип	По умолчанию
v-model	Текущий выбор	Date \| [Date, Date] \| null	—
mode	Режим: дата / месяц / год / дата и время / диапазон дат	'date' \| 'month' \| 'year' \| 'datetime' \| 'range'	'date'
size	Размер	'small' \| 'medium' \| 'large'	'medium'
disabled / clearable / readonly	Отключено / очищаемо / только чтение	boolean	false / true / true
placeholder	Текст-плейсхолдер	string	Языковой пакет
format	Формат отображения (yyyy-MM-dd, yyyy-MM и др.)	string	'yyyy-MM-dd'
rangeSeparator	Текст разделителя в режиме диапазона	string	'~'
cellClassName	Пользовательское имя класса ячейки	(date: Date) => string	—
popperClass	Дополнительное имя класса всплывающего слоя	string	—
teleportTarget	Целевой узел монтирования всплывающего слоя	string \| HTMLElement	'body'
sx	Сокращённая запись разметки через sx	—	—

Events

input (v-model), change (value)

Доступность

Триггер: role="combobox" + aria-expanded, панель — role="grid"; в режиме datetime колонка времени имеет role="spinbutton" с aria-valuenow/min/max; при размещении внутри LhFormItem и неудачной валидации автоматически устанавливается aria-invalid.