Selector de hora

LhTimePicker es un componente selector para elegir una hora, con selección precisa de horas, minutos y segundos.

Uso básico

Uso básico

03:32:48

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

Estado deshabilitado

Estado deshabilitado

03:32:48

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

Formato de hora

Formato de hora

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>

Botón de borrado

Botón de borrado

03:32:48

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

Rango de horas personalizado

Rango de horas personalizado

08:32:48

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

Tamaños

Tamaños

03:32:48

03:32:48

03:32:48

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

Incrementos

Incrementos

03:32:48

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

Marcador de posición, solo lectura y control con teclas de dirección

placeholder personaliza el texto del marcador de posición; readonly deja el campo en solo lectura; arrow-control permite desplazarse por las columnas con las teclas de dirección para seleccionar; start / end limitan el rango de horas; step-hour / step-minute / step-second personalizan el incremento de cada columna.

placeholder / readonly

03:32:48

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

<template>
  <!-- Texto del marcador de posición -->
  <LhTimePicker v-model="tp1" placeholder="Selecciona la hora del recordatorio" />
  <!-- Solo lectura -->
  <LhTimePicker :model-value="tp2" readonly />
</template>

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

<template>
  <!-- Texto del marcador de posición -->
  <LhTimePicker v-model="tp1" placeholder="Selecciona la hora del recordatorio" />
  <!-- Solo lectura -->
  <LhTimePicker :model-value="tp2" readonly />
</template>

TimePicker API

Prop	Descripción	Tipo	Predeterminado
modelValue	Hora enlazada	Date	null
size	Tamaño	"small" | "medium" | "large" | "mini" | "x-large"	'medium'
disabled	Si se deshabilita	boolean	false
clearable	Si se muestra el botón de borrado	boolean	true
placeholder	Texto del marcador de posición (si no se pasa, se genera a partir de format, tomando timepicker.hour/minute/second del paquete de idioma)	string	''
format	Formato de hora	string	'HH:mm:ss'
readonly	Campo de entrada de solo lectura	boolean	true
arrowControl	Si se muestran las flechas	boolean	false
start	Hora de inicio	number	0
end	Hora de fin	number	24
stepHour	Incremento de horas	number	1
stepMinute	Incremento de minutos	number	1
stepSecond	Incremento de segundos	number	1
sx	Propiedades de diseño rápido sx (p. ej. { mt: 2, w: '50%' }), convertidas a estilos en línea sobre el elemento raíz del disparador (la capa flotante no se ve afectada)	LhSxProps	—

TimePicker Events

Evento	Descripción	Tipo
update:model-value	Se dispara cuando cambia el valor	(value: Date) => void
change	Se dispara al confirmar el cambio de valor	(value: Date) => void

Definiciones de tipos

Este componente exporta las siguientes estructuras de tipos TypeScript (extraídas automáticamente de los fuentes packages/components/time-picker/src/types.ts y @lh-ui/share/core/*; abre cada entrada para ver la definición completa; consulta la tabla de Props de arriba para la descripción de los atributos):

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
  /** Propiedades de diseño rápido sx */
  sx?: LhSxProps
}

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

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