Выбор времени

LhTimePicker — компонент для выбора времени с точностью до часов, минут и секунд.

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

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

03:32:51

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

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

<template>
  <LhTimePicker v-model="baseTime" />
</template>

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

<template>
  <LhTimePicker v-model="baseTime" />
</template>

Отключённое состояние

Отключённое состояние

03:32:51

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

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

<template>
  <LhTimePicker v-model="disabledTime" disabled />
</template>

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

<template>
  <LhTimePicker v-model="disabledTime" disabled />
</template>

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

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

03:32

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

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

<template>
  <LhTimePicker v-model="formatTime1" format="HH:mm" />
</template>

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

<template>
  <LhTimePicker v-model="formatTime1" format="HH:mm" />
</template>

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

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

03:32:51

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

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

<template>
  <LhTimePicker v-model="clearTime" clearable />
</template>

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

<template>
  <LhTimePicker v-model="clearTime" clearable />
</template>

Пользовательский диапазон времени

Пользовательский диапазон времени

08:32:51

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

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

<template>
  <LhTimePicker v-model="rangeTime" :start="8" :end="20" />
</template>

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

<template>
  <LhTimePicker v-model="rangeTime" :start="8" :end="20" />
</template>

Размер

Размер

03:32:51

03:32:51

03:32:51

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

const smallTime = ref(new Date())
const mediumTime = ref(new Date())
const largeTime = ref(new Date())
</script>

<template>
  <LhTimePicker v-model="smallTime" size="small" />
  <LhTimePicker v-model="mediumTime" size="medium" />
  <LhTimePicker v-model="largeTime" size="large" />
</template>

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

<template>
  <LhTimePicker v-model="smallTime" size="small" />
  <LhTimePicker v-model="mediumTime" size="medium" />
  <LhTimePicker v-model="largeTime" size="large" />
</template>

Шаг

Шаг

03:32:51

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

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

<template>
  <LhTimePicker v-model="stepTime" :stepMinute="5" :stepSecond="10" />
</template>

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

<template>
  <LhTimePicker v-model="stepTime" :stepMinute="5" :stepSecond="10" />
</template>

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

placeholder задаёт подсказывающий текст; readonly — только чтение; arrow-control позволяет перемещаться по колонкам стрелками; start / end ограничивают диапазон времени; step-hour / step-minute / step-second настраивают шаг каждой колонки.

placeholder / readonly

03:32:51

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

<template>
  <!-- Плейсхолдер -->
  <LhTimePicker v-model="tp1" placeholder="Выберите время напоминания" />
  <!-- Только чтение -->
  <LhTimePicker :model-value="tp2" readonly />
</template>

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

<template>
  <!-- Плейсхолдер -->
  <LhTimePicker v-model="tp1" placeholder="Выберите время напоминания" />
  <!-- Только чтение -->
  <LhTimePicker :model-value="tp2" readonly />
</template>

TimePicker API

Свойство	Описание	Тип	Значение по умолчанию
modelValue	привязанное время	Date	null
size	размер	"small" | "medium" | "large" | "mini" | "x-large"	'medium'
disabled	отключён ли	boolean	false
clearable	показывать ли кнопку очистки	boolean	true
placeholder	плейсхолдер (если не передан, генерируется по format из сообщений локали timepicker.hour/minute/second)	string	''
format	формат времени	string	'HH:mm:ss'
readonly	поле ввода только для чтения	boolean	true
arrowControl	показывать ли стрелки	boolean	false
start	начальный час	number	0
end	конечный час	number	24
stepHour	шаг часов	number	1
stepMinute	шаг минут	number	1
stepSecond	шаг секунд	number	1
sx	свойства быстрой раскладки (например { mt: 2, w: '50%' }), применяются как инлайн-стили к корневому элементу триггера (плавающая панель не затрагивается)	LhSxProps	—

TimePicker Events

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

Определения типов

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

LhTimePickerProps

export interface LhTimePickerProps {
  modelValue?: Date | null
  size?: LhComponentSize
  disabled?: boolean
  clearable?: boolean
  placeholder?: string
  format?: string
  readonly?: boolean
  arrowControl?: boolean
  start?: number
  end?: number
  stepHour?: number
  stepMinute?: number
  stepSecond?: number
  /** sx: свойства быстрой раскладки */
  sx?: LhSxProps
}

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

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