TimePicker

A scrollable time picker with 24-hour and 12-hour (AM/PM) format support. Opens a popover with hour and minute columns, scrolls to the selected value automatically, and closes on outside click. The v-model value is always stored in HH:mm (24h) format regardless of the display format.

Basic (24h)

Demo

Select Time

09:30

Value (HH:mm): 09:30

<script setup>
import { ref } from 'vue'
import { PxTimePicker } from 'praxis-vue-ui'

const time = ref('09:30')
</script>

<template>
  <PxTimePicker
    v-model="time"
    label="Select Time"
  />
</template>

12-Hour Format (AM/PM)

Use format="12h" for the US/common format. The display shows 09:30 AM but the v-model value remains in HH:mm (24h) internally.

12h Format

Meeting Time

02:45 PM

Value (HH:mm 24h): 14:45

<script setup>
import { ref } from 'vue'
import { PxTimePicker } from 'praxis-vue-ui'

const time = ref('14:45') // stored as 24h
</script>

<template>
  <!-- Displays as 02:45 PM, stores as 14:45 -->
  <PxTimePicker
    v-model="time"
    label="Meeting Time"
    format="12h"
  />
</template>

Disabled State

Disabled

Read-only Time

14:45

<PxTimePicker
  v-model="time"
  label="Read-only Time"
  :disabled="true"
/>

Without Label

No Label

09:30

<PxTimePicker v-model="time" placeholder="Select time" />

API Reference

Prop	Type	Default	Description
modelValue	string | null	—	Valor del tiempo en formato HH:mm (24h) — siempre en 24h internamente
label	string	—	Etiqueta superior del input
required	boolean	—	Si el campo es obligatorio (muestra asterisco rojo)
disabled	boolean	—	Deshabilita el input
placeholder	string	—	Placeholder opcional
format	"24h" | "12h"	—	Formato de visualización: '24h' (default) o '12h' (AM/PM)

Accessibility

• The trigger element is keyboard-accessible via click.
• Closes automatically on outside click via @vueuse/core onClickOutside.
• Popover uses z-50 so it always renders above other content.
• Label is rendered via PxLabel with proper for/id association.