Skip to content

PickerListHours

A component presenting two columns in which a list of hours and minutes is placed.Letters can be scrolled and one of the elements as active.

Props

max
Defines the maximum value of the hour range
type:Number
default:23
time
Defines whether we choose clock time (true) or duration (called log)
type:Boolean
default:true
twelve
Defines whether 12 or 24 hours is used
type:Boolean
default:false
step
Defines the ranges of minutes
type:Number
default:5
values:1, 2, 3, 4, 5, 6, 10, 15, 20, 30
hour
required
Value for time
type:Number
minute
required
Value for minutes
type:Number
hoursText
Text describing the column with hours
type:String
default:Hours
minutesText
Text describing a column with minutes
type:String
default:Minutes

Events

set-hour
Set an hour
set-minute
Set a minute
set-pm
Changes the date of showing the date to 12 or 24 hours

Examples

12-hour time with 15-minute intervals
Hours
Minutes
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
15
30
45

Time value: 12, Value of the minute: 45

html
<picker-list-hours
  :twelve="false"
  :minute="minutes"
  :hour="hours"
  :step="5"
  @set-hour="changeHour($event)"
  @set-minute="changeMinute($event)"
/>
ts
import { ref } from 'vue'
const hours = ref(12)
const minutes = ref(45)
function changeHour(e) {
  hours.value = e
}
function changeMinute(e) {
  minutes.value = e
}
Maximum 16 hours, with 5-minute intervals
Hours
Minutes
00
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
00
05
10
15
20
25
30
35
40
45
50
55

Time value: 12, Value of the minute: 45

html
<picker-list-hours
  :max="16"
  :minute="minutes"
  :hour="hours"
  :step="5"
  @set-hour="changeHour($event)"
  @set-minute="changeMinute($event)"
/>
ts
import { ref } from 'vue'
const hours = ref(12)
const minutes = ref(45)
function changeHour(e) {
  hours.value = e
}
function changeMinute(e) {
  minutes.value = e
}