Documentation

Timepicker

display format: h:i A

format: H:i

v-model:

Show Code
<ks-timepicker
    name="start_time"
    :time-format="time_format"
    display-format="h:i A"
    time-step="30"
    v-model="start_time"
></ks-timepicker>

Timepicker (24-Hour)

display format: H:i

format: H:i

v-model:

Show Code
<ks-timepicker
    name="start_time"
    :time-format="time_format"
    min-time="00:00"
    display-format="H:i"
    time-step="30"
    v-model="start_time"
></ks-timepicker>

Timepicker (end-of-day option)

display format: h:i A

format: H:i

v-model:

Show Code
<ks-timepicker
    name="start_time"
    :time-format="time_format"
    display-format="h:i A"
    time-step="30"
    v-model="start_time"
    :end-of-day="true"
></ks-timepicker>

Props
Methods

Name	Type	Default	Description
timeStep	Number, String	30	The number of minutes to step through for the list of options. ***Note: This implementation assumes nice round numbers for timeStep (e.g. 15 or 30 minutes) and minTime (e.g. 9:30 am). It is not bulletproof and may produce an invalid timeOptions computed property otherwise.
timeFormat	String	H:i	The format of the value for v-model (options: h,H,i,a,A)
displayFormat	String	h:i A	The format of the displayed time and options in the list (options: h,H,i,a,A)
minTime	String	04:00	The minimum time for the options list
maxTime	String	24:00	The maximum time fore the options list
listHeight	String	200px	The height of the options list
disabled	Boolean	false	Whether or not disable the input
endOfDay	Boolean	false	Enables the selection of "End of day" times like 11:59 PM or 23:59