Timepicker

Base input type date

Usage

Simple Usage

preview

<template>
  <p-timepicker />
</template>

Sizing

Timepicker has 4 variants size: xs, sm, md, lg, default is md.

preview

<template>
  <p-timepicker size="xs" />
  <p-timepicker size="sm" />
  <p-timepicker size="md" />
  <p-timepicker size="lg" />
</template>

Placeholder

You can set input placeholder via placeholder props

preview

<template>
  <p-timepicker placeholder="Time" />
</template>

Time Format

Time has 12-hour and 24-hour clock format. You can use 12-hour clock format by set is12-hour prop.

preview

<template>
  <p-timepicker />
  <p-timepicker is12-hour />
</template>

Limit Time

You can limit the time via min or max props

preview

<template>
  <!-- Limit this year only -->
  <p-datepicker
    :min="min"
    :max="max" />
</template>

<script lang="ts" 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>

Disabled State

preview

<template>
  <p-datepicker disabled />
</template>

Readonly state

preview

<template>
  <p-timepicker readonly />
</template>

Error state

preview

<template>
  <p-timepicker error />
</template>

Binding v-model

Date v-model

preview

Result :

Fri Jan 24 2025 07:55:52 GMT+0000 (Coordinated Universal Time)

<template>
  <p-timepicker v-vmodel="model" />
</template>

<script setup>
  const model = ref(new Date())
</script>

TimeModel v-model

onoff

12-hourpreview

result:

{
  "hh": "01",
  "mm": "30"
}

<template>
  <p-timepicker v-vmodel="model" :is12-hour="is12Hour" />
  <p-toggle v-model="is12Hour">12-hour</p-toggle>
</template>

<script setup>
import type { TimeModel } from '@privyid/persona/dist/components/time'

const model = ref<TimeModel>({
  hh: '01',
  mm: '30'
})
</script>

Customization Slots

Custom Footer

preview

result:

Fri Jan 24 2025 07:55:52 GMT+0000 (Coordinated Universal Time)

<template>
  <p-timepicker v-model="model">
    <template #footer="{ confirm, close }">
      <p-button class="mx-2" @click="confirm">
        Apply
      </p-button>
    </template>
  </p-timepicker>
</template>

<script setup>
const model = ref(new Date())
</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
size	String	md	Input size variant, valid value: xs, sm, md, lg
placeholder	String	-	Input placeholder
disabled	Boolean	false	Disabled state
readonly	Boolean	false	Readonly state
error	Boolean	false	Error state
dismissable	Boolean	false	Show dismiss button action
dismissLabel	String	Cancel	Label to place at dismiss button
confirmLabel	String	Set	Label to place at confirm button
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
footer	Content to place at footer

footer slot contains scoped slots

Scoped	Type	Default	Description
confirm	Function	-	Hook to update v-model value
close	Function	-	Hook to close dropdown menu

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

See Also

• Time