Skip to content

Timepicker

Base input type date

Usage

Simple Usage

preview
vue
<template>
  <p-timepicker />
</template>

Sizing

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

preview
vue
<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
vue
<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
vue
<template>
  <p-timepicker />
  <p-timepicker is12-hour />
</template>

Limit Time

You can limit the time via min or max props

preview
vue
<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
vue
<template>
  <p-datepicker disabled />
</template>

Readonly state

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

Error state

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

Binding v-model

Date v-model

preview

Result :

Fri Jul 12 2024 14:29:31 GMT+0000 (Coordinated Universal Time)
vue
<template>
  <p-timepicker v-vmodel="model" />
</template>

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

TimeModel v-model

preview

result:

{
  "hh": "01",
  "mm": "30"
}
vue
<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

preview

result:

Fri Jul 12 2024 14:29:31 GMT+0000 (Coordinated Universal Time)
vue
<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

PropsTypeDefaultDescription
modelValueDate or TimeModel-v-model value accept Date and TimeModel object which have default value is current start of day
sizeStringmdInput size variant, valid value: xs, sm, md, lg
placeholderString-Input placeholder
disabledBooleanfalseDisabled state
readonlyBooleanfalseReadonly state
errorBooleanfalseError state
dismissableBooleanfalseShow dismiss button action
dismissLabelStringCancelLabel to place at dismiss button
confirmLabelStringSetLabel to place at confirm button
is12-hourBooleanfalseEnable hour item to be formatted to 12 Hour
hour-intervalNumber1Step of each hour item
minute-intervalNumber1Steap of each minute item
minDate-Minimum datetime to generate time items
maxDate-Maximum datetime to generate time items

Slots

NameDescription
footerContent to place at footer

footer slot contains scoped slots

ScopedTypeDefaultDescription
confirmFunction-Hook to update v-model value
closeFunction-Hook to close dropdown menu

Events

NameArgumentsDescription
contextTimeContextEvent 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

Released under the MIT License.