Time
Sub-component for Timepicker
Usage
Simple usage
:
vue
<template>
<p-time />
</template>Time Interval
Set prop hour-interval or minute-interval to make time item use interval .
:
vue
<template>
<p-time :hour-interval="2" :minute-interval="10" />
</template>12 Hour Format
Set prop is12-hour to use 12 hour time format with am/pm period picker
:
vue
<template>
<p-time is12-hour />
</template>Limit Time
Min and Max
Time can limit the options to be selected using prop min and max. Default value of min is start of today and max is end of today. Both min and max props use Date type for widespread use.
:
vue
<template>
<p-time :min="min" :max="max" />
</template>
<script setup>
import { set } from 'date-fns'
const min = ref(set(new Date(), { hours: 1, minutes: 0 }))
const max = ref(set(new Date(), { hours: 17, minutes: 30 }))
</script>Min and Max with Interval
:
vue
<template>
<p-time :min="min" :max="max" />
</template>
<script setup>
import { set } from 'date-fns'
const min = ref(set(new Date(), { hours: 1, minutes: 20 }))
const max = ref(set(new Date(), { hours: 17, minutes: 30 }))
</script>Binding v-model
Time v-model can support data type of Date and TimeModel. Which TimeModel is object with hh, mm, and a property.
Date v-model
:
result:
Wed Oct 30 2024 21:35:39 GMT+0000 (Coordinated Universal Time)vue
<template>
<p-time v-model="model" v-slot="{ confirm }">
<p-button
variant="ghost"
class="mr-2">
Cancel
</p-button>
<p-button
variant="solid"
color="info"
@click="confirm">
Set
</p-button>
</p-time>
</template>
<script setup>
const model = ref(new Date())
</script>TimeModel v-model
:
result:
{
"hh": "01",
"mm": "30"
}vue
<template>
<p-time v-model="model" v-slot="{ confirm }">
<p-button
variant="ghost"
class="mr-2">
Cancel
</p-button>
<p-button
variant="solid"
color="info"
@click="confirm">
Set
</p-button>
</p-time>
</template>
<script setup>
import type { TimeModel } from '@privyid/persona/dist/components/time'
const model = ref<TimeModel>({
hh: '01',
mm: '30'
})
</script>API
Props
| Props | Type | Default | Description |
|---|---|---|---|
modelValue | Date or TimeModel | - | v-model value accept Date and TimeModel object which have default value is current start of day |
is12-hour | Boolean | false | Enable hour item to be formatted to 12 Hour |
hour-interval | Number | 1 | Step of each hour item |
minute-interval | Number | 1 | Steap of each minute item |
min | Date | - | Minimum datetime to generate time items |
max | Date | - | Maximum datetime to generate time items |
Slots
| Name | Description |
|---|---|
default | Content to place at footer as footer action |
default slot contains scoped slots
| Scoped | Type | Default | Description |
|---|---|---|---|
confirm | Function | - | Hook to update v-model value |
Events
| Name | Arguments | Description |
|---|---|---|
context | TimeContext | Event when confirm hook is triggered. TimeContext contains property time formatted as 24-hour or 12-hour, date is Date object, and dateISO formatted as standard ISO string |