Sélecteur d'heure

LhTimePicker est un sélecteur permettant de choisir l'heure, les minutes et les secondes avec précision.

Utilisation de base

Utilisation de base

03:32:49

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

État désactivé

État désactivé

03:32:49

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

Formatage de l'heure

Formatage de l'heure

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>

Bouton d'effacement

Bouton d'effacement

03:32:49

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

Plage horaire personnalisée

Plage horaire personnalisée

08:32:49

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

Tailles

Tailles

03:32:49

03:32:49

03:32:49

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

Incréments

Incréments

03:32:49

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

Espace réservé, lecture seule et navigation par flèches

placeholder personnalise le texte d'espace réservé ; readonly passe en lecture seule ; arrow-control permet de parcourir les colonnes avec les flèches directionnelles ; start / end limitent la plage horaire ; step-hour / step-minute / step-second personnalisent l'incrément de chaque colonne.

placeholder / readonly

03:32:49

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

<template>
  <!-- Texte d'espace réservé -->
  <LhTimePicker v-model="tp1" placeholder="Choisir l'heure du rappel" />
  <!-- Lecture seule -->
  <LhTimePicker :model-value="tp2" readonly />
</template>

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

<template>
  <!-- Texte d'espace réservé -->
  <LhTimePicker v-model="tp1" placeholder="Choisir l'heure du rappel" />
  <!-- Lecture seule -->
  <LhTimePicker :model-value="tp2" readonly />
</template>

TimePicker API

Prop	Description	Type	Valeur par défaut
modelValue	Heure liée	Date	null
size	Taille	"small" | "medium" | "large" | "mini" | "x-large"	'medium'
disabled	Désactivé	boolean	false
clearable	Affiche le bouton d'effacement	boolean	true
placeholder	Texte d'espace réservé (lorsqu'il n'est pas fourni, généré à partir du format via les messages linguistiques timepicker.hour/minute/second)	string	''
format	Format de l'heure	string	'HH:mm:ss'
readonly	Champ en lecture seule	boolean	true
arrowControl	Affiche les flèches	boolean	false
start	Heure de début	number	0
end	Heure de fin	number	24
stepHour	Incrément des heures	number	1
stepMinute	Incrément des minutes	number	1
stepSecond	Incrément des secondes	number	1
sx	Propriétés de mise en page rapide (par ex. { mt: 2, w: '50%' }), converties en styles inline appliqués à la racine du déclencheur (le panneau flottant n'est pas affecté)	LhSxProps	—

TimePicker Events

Événement	Description	Type
update:model-value	Émis lorsque la valeur change	(value: Date) => void
change	Émis lorsque la valeur est confirmée	(value: Date) => void

Définitions de types

Les structures de types TypeScript exportées par ce composant sont les suivantes (extraites automatiquement de packages/components/time-picker/src/types.ts et de @lh-ui/share/core/* ; cliquez sur chaque entrée pour afficher la définition complète ; les descriptions des props se trouvent dans le tableau Props ci-dessus) :

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
  /** Propriétés de mise en page rapide sx */
  sx?: LhSxProps
}

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

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