Skip to content

Time

Sub-component for Timepicker

Usage

Simple usage

00
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
:
00
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
preview
vue
<template>
  <p-time />
</template>

Time Interval

Set prop hour-interval or minute-interval to make time item use interval .

00
02
04
06
08
10
12
14
16
18
20
22
:
00
10
20
30
40
50
preview
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

12
01
02
03
04
05
06
07
08
09
10
11
:
00
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
AM
PM
preview
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.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
:
00
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
preview
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

01
03
05
07
09
11
13
15
17
:
00
10
20
30
40
50
preview
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

00
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
:
00
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
preview

result:

Fri Mar 22 2024 07:54:02 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

00
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
:
00
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
preview

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

PropsTypeDefaultDescription
modelValueDate or TimeModel-v-model value accept Date and TimeModel object which have default value is current start of day
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
defaultContent to place at footer as footer action

default slot contains scoped slots

ScopedTypeDefaultDescription
confirmFunction-Hook to update v-model value

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.