Выбор даты

LhDatePicker — компонент для выбора даты и времени; поддерживает режимы выбора даты, месяца, года и другие.

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

vue

<script setup lang="ts">
import { ref } from 'vue'

const baseDate = ref(new Date(2024, 0, 1))
</script>

<template>
  <LhDatePicker v-model="baseDate" />
</template>

vue

<script>
export default {
  data() {
    return {
      baseDate: new Date(2024, 0, 1),
    }
  },
}
</script>

<template>
  <LhDatePicker v-model="baseDate" />
</template>

Недоступное состояние

vue

<script setup lang="ts">
import { ref } from 'vue'

const disabledDate = ref(new Date())
</script>

<template>
  <LhDatePicker v-model="disabledDate" disabled />
</template>

vue

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

<template>
  <LhDatePicker v-model="disabledDate" disabled />
</template>

Форматирование даты

vue

<script setup lang="ts">
import { ref } from 'vue'

const formatDate = ref(new Date())
</script>

<template>
  <LhDatePicker v-model="formatDate" format="MM/dd/yyyy" />
</template>

vue

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

<template>
  <LhDatePicker v-model="formatDate" format="MM/dd/yyyy" />
</template>

Кнопка очистки

vue

<script setup lang="ts">
import { ref } from 'vue'

const clearDate = ref(new Date())
</script>

<template>
  <LhDatePicker v-model="clearDate" clearable />
</template>

vue

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

<template>
  <LhDatePicker v-model="clearDate" clearable />
</template>

Размер

vue

<script setup lang="ts">
import { ref } from 'vue'

const smallDate = ref(new Date())
const mediumDate = ref(new Date())
const largeDate = ref(new Date())
</script>

<template>
  <LhDatePicker v-model="smallDate" size="small" />
  <LhDatePicker v-model="mediumDate" size="medium" />
  <LhDatePicker v-model="largeDate" size="large" />
</template>

vue

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

<template>
  <LhDatePicker v-model="smallDate" size="small" />
  <LhDatePicker v-model="mediumDate" size="medium" />
  <LhDatePicker v-model="largeDate" size="large" />
</template>

Режим выбора

mode поддерживает 'date' (по умолчанию) / 'month' / 'year'. Внутри панели по клику на заголовок выполняется пошаговое углубление: дата → месяц → год; в режимах месяца/года панель открывается сразу на нужной сетке, а кликом выбирается значение и панель закрывается (без нижних кнопок).

vue

<script setup lang="ts">
import { ref } from 'vue'

const monthDate = ref(new Date())
const yearDate = ref(new Date(2024, 0, 1))
</script>

<template>
  <LhDatePicker v-model="monthDate" mode="month" />
  <LhDatePicker v-model="yearDate" mode="year" />
</template>

vue

<script>
export default {
  data() {
    return {
      monthDate: new Date(),
      yearDate: new Date(2024, 0, 1),
    }
  },
}
</script>

<template>
  <LhDatePicker v-model="monthDate" mode="month" />
  <LhDatePicker v-model="yearDate" mode="year" />
</template>

Плейсхолдер, только чтение и настройка

placeholder задаёт плейсхолдер; readonly — только для чтения (панель можно просматривать, но нельзя выбирать); range-separator — пользовательский разделитель диапазона; cell-class-name добавляет пользовательский класс к ячейке даты; popper-class настраивает стили панели.

vue

<script setup lang="ts">
import { ref } from 'vue'
const dp1 = ref(null)
const dp2 = ref(new Date())
</script>

<template>
  <!-- Плейсхолдер -->
  <LhDatePicker v-model="dp1" placeholder="Выберите дату заезда" />
  <!-- Только для чтения -->
  <LhDatePicker :model-value="dp2" readonly />
</template>

vue

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

<template>
  <!-- Плейсхолдер -->
  <LhDatePicker v-model="dp1" placeholder="Выберите дату заезда" />
  <!-- Только для чтения -->
  <LhDatePicker :model-value="dp2" readonly />
</template>

DatePicker API

Внимание: выбор datetime / диапазона сейчас существует только на уровне типов, соответствующий UI выбора отсутствует (столбцы времени и панель диапазона не реализованы, см. P-08 в журнале семейства). При передаче значения диапазона [Date, Date] снаружи панель отображается корректно, но подтверждение в панели не перезаписывает значение диапазона.

Свойство	Описание	Тип	По умолчанию
modelValue	Привязанная дата	`Date \| [Date, Date]`	`null`
mode	Режим выбора	`"date" \| "month" \| "year" \| "datetime"`	`'date'`
size	Размер	`"small" \| "medium" \| "large" \| "mini" \| "x-large"`	`'medium'`
disabled	Отключён ли компонент	`boolean`	`false`
clearable	Показывать ли кнопку очистки	`boolean`	`true`
placeholder	Плейсхолдер (если не передано, генерируется по format из языкового пакета `datepicker.year/month`)	`string`	`''`
format	Формат даты	`string`	`'yyyy-MM-dd'`
readonly	Поле ввода только для чтения	`boolean`	`true`
rangeSeparator	Разделитель диапазона	`string`	`'~'`
cellClassName	—	`(date: Date) => string`	—
popperClass	—	`string`	—
sx	Сокращённые свойства компоновки (например `{ mt: 2, w: '50%' }`), преобразуются в инлайн-стили и применяются к корневому элементу триггера (на всплывающую панель не влияют)	`LhSxProps`	—

DatePicker Events

Событие	Описание	Тип
update:model-value	Срабатывает при изменении значения	`(value: Date \| [Date, Date]) => void`
change	Срабатывает при подтверждении изменения значения	`(value: Date \| [Date, Date]) => void`

Типы

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

LhDatePickerProps

export interface LhDatePickerProps {
  modelValue?: Date | [Date, Date] | null
  mode?: LhDatePickerMode
  size?: LhComponentSize
  disabled?: boolean
  clearable?: boolean
  placeholder?: string
  format?: string
  readonly?: boolean
  rangeSeparator?: string
  cellClassName?: (date: Date) => string
  popperClass?: string
  /** Сокращённые свойства компоновки sx */
  sx?: LhSxProps
}

LhDatePickerMode _{(из @lh-ui/share/core/date-picker)}

/**
 * Режим DatePicker
 */
export type LhDatePickerMode = 'date' | 'month' | 'year' | 'datetime'

LhComponentSize _{(из @lh-ui/share/core/shared)}

export type LhComponentSize = (typeof LH_SIZE_CONST)[keyof typeof LH_SIZE_CONST]

Выбор даты ​

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

Недоступное состояние ​

Форматирование даты ​

Кнопка очистки ​

Размер ​

Режим выбора ​

Плейсхолдер, только чтение и настройка ​

DatePicker API ​

DatePicker Events ​

Типы ​