Vue Component Library

Appearance

TimePicker Component Demo ​

This page demonstrates the TimePicker component with various configurations and examples.

Basic Usage ​

A simple time picker with default settings.

vue
<template>
  <OTimePicker
    v-model="selectedTime"
    label="Select Time"
    placeholder="Choose a time"
    @change="handleTimeChange"
  />
</template>

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

const selectedTime = ref('')

const handleTimeChange = (time) => {
  console.log('Time selected:', time)
}
</script>
Select Time
Choose a time🕐

12-Hour Format (Default) ​

Time picker with 12-hour format and AM/PM selection.

vue
<template>
  <OTimePicker
    v-model="time12h"
    label="12-Hour Format"
    :use12HourFormat="true"
    :minuteStep="15"
    @change="handleTimeChange"
  />
</template>

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

const time12h = ref('')

const handleTimeChange = (time) => {
  console.log('12-hour time selected:', time)
}
</script>
12-Hour Format
Select time🕐

24-Hour Format ​

Time picker with 24-hour format.

vue
<template>
  <OTimePicker
    v-model="time24h"
    label="24-Hour Format"
    :use12HourFormat="false"
    :minuteStep="5"
    @change="handleTimeChange"
  />
</template>

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

const time24h = ref('')

const handleTimeChange = (time) => {
  console.log('24-hour time selected:', time)
}
</script>
24-Hour Format
Select time🕐

Custom Minute Steps ​

Time picker with different minute step intervals.

30-Minute Steps ​

vue
<template>
  <OTimePicker
    v-model="time30min"
    label="30-Minute Intervals"
    :minuteStep="30"
    @change="handleTimeChange"
  />
</template>

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

const time30min = ref('')

const handleTimeChange = (time) => {
  console.log('30-minute time selected:', time)
}
</script>
30-Minute Intervals
Select time🕐

15-Minute Steps ​

vue
<template>
  <OTimePicker
    v-model="time15min"
    label="15-Minute Intervals"
    :minuteStep="15"
    @change="handleTimeChange"
  />
</template>

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

const time15min = ref('')

const handleTimeChange = (time) => {
  console.log('15-minute time selected:', time)
}
</script>
15-Minute Intervals
Select time🕐

Disabled State ​

Time picker in disabled state.

vue
<template>
  <OTimePicker
    v-model="disabledTime"
    label="Disabled Time Picker"
    :disabled="true"
  />
</template>

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

const disabledTime = ref('14:30')
</script>
Disabled Time Picker
2:30 PM🕐

With Pre-selected Time ​

Time picker with a pre-selected time value.

vue
<template>
  <OTimePicker
    v-model="preselectedTime"
    label="Meeting Time"
    placeholder="Select meeting time"
    @change="handleTimeChange"
  />
</template>

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

const preselectedTime = ref('09:30')

const handleTimeChange = (time) => {
  console.log('Meeting time changed to:', time)
}
</script>
Meeting Time
9:30 AM🕐