TimePicker API Reference

Props

Prop	Type	Default	Description
modelValue	String	''	The selected time value in "HH:MM" format (v-model)
label	String	''	Label text displayed above the time picker
placeholder	String	'Select time'	Placeholder text when no time is selected
disabled	Boolean	false	Whether the time picker is disabled
use12HourFormat	Boolean	true	Whether to use 12-hour format with AM/PM
minuteStep	Number	1	Step interval for minutes (1, 5, 15, 30, etc.)

Events

Event	Payload	Description
update:modelValue	String	Emitted when the selected time changes (v-model)
change	String	Emitted when the selected time changes, with the new time value in "HH:MM" format

Slots

The component doesn't provide any slots for customization.

Methods

The component doesn't expose any methods via template refs.

Example Usage

<template>
  <OTimePicker
    v-model="selectedTime"
    label="Meeting Time"
    placeholder="Select meeting time"
    :use12HourFormat="true"
    :minuteStep="15"
    :disabled="false"
    @change="handleTimeChange"
  />
</template>

<script setup>
import { ref } from 'vue'

const selectedTime = ref('')

const handleTimeChange = (time) => {
  console.log('Time changed:', time)
  // Handle time change logic
}
</script>

Time Format

The component uses the following time format:

• Input/Output: "HH:MM" format (e.g., "14:30", "09:15")
• Display: Formatted based on use12HourFormat:
  • 12-hour: "2:30 PM", "9:15 AM"
  • 24-hour: "14:30", "09:15"

Minute Step Options

The minuteStep prop controls the available minute options:

• 1: Every minute (0, 1, 2, ..., 59)
• 5: Every 5 minutes (0, 5, 10, ..., 55)
• 15: Every 15 minutes (0, 15, 30, 45)
• 30: Every 30 minutes (0, 30)
• Any other value: Custom intervals

Dependencies

This component depends on:

• Vue 3 with Composition API
• OMenu component for the dropdown interface