Timepicker

An input with a simple dropdown/modal for selecting a time, uses native timepicker for mobile

<template>
    <section>
        <b-field>
            <b-switch v-model="formatAmPm">AM/PM</b-switch>
        </b-field>
        <b-field label="Select time">
            <b-timepicker
                rounded
                placeholder="Click to select..."
                icon="clock"
                :hour-format="format">
            </b-timepicker>
        </b-field>
    </section>
</template>

<script>
export default {
    data() {
        return {
            formatAmPm: false
        }
    },
    computed: {
        format() {
            return this.formatAmPm ? '12' : '24'
        }
    }
}
</script>

Editable (non readonly)

Use editable prop to let the user type a time.

<template>
    <b-field label="Select timepicker">
        <b-timepicker
            placeholder="Type or select a date..."
            icon="clock"
            editable>
        </b-timepicker>
    </b-field>
</template>

Range

You can limit the date range with min-time and max-time props.

<template>
    <b-field label="Select time">
        <b-timepicker
            placeholder="Click to select..."
            :min-time="minTime"
            :max-time="maxTime">
        </b-timepicker>
    </b-field>
</template>

<script>
    export default {
        data() {
            const min = new Date()
            min.setHours(9)
            min.setMinutes(0)
            const max = new Date()
            max.setHours(18)
            max.setMinutes(0)
            return {
                minTime: min,
                maxTime: max
            }
        }
    }
</script>

Footer

Any slots are added to the footer of the timepicker.

<template>
    <b-field label="Select time">
        <b-timepicker v-model="time"
            placeholder="Click to select...">

            <button class="button is-primary"
                @click="time = new Date()">
                <b-icon icon="clock"></b-icon>
                <span>Now</span>
            </button>

            <button class="button is-danger"
                @click="time = null">
                <b-icon icon="close"></b-icon>
                <span>Clear</span>
            </button>
        </b-timepicker>
    </b-field>
</template>

<script>
    export default {
        data() {
            return {
                time: new Date()
            }
        }
    }
</script>

Inline

Timepicker can also be shown inline with the inline prop, input is removed, set a v-model to get the date.

<template>
    <b-timepicker v-model="time" inline></b-timepicker>
</template>

<script>
    export default {
        data() {
            return {
                time: new Date()
            }
        }
    }
</script>

API

Name
Description
Type
Values
Default
v-modelBinding value Date
hour-formatHour format for input and display String 12 or 2424
increment-minutesStep minutes for select component Number 1
time-formatterFunction to format time (Date type) to a string for display in the input Function HH:mm or HH:mm AM/PM
time-parserFunction to parse string to a time (Date type) for set a time from the input to the component Function HH:mm or HH:mm AM/PM
min-timeEarliest time available for selection Date
max-timeLatest time available for selection Date
sizeVertical size of input and picker, optional String is-small, is-medium, is-large
inlineTimepicker is shown inline, input is removed Boolean false
editableEnable input/typing. Note that you might have to set a custom time parser Boolean false
loadingAdd the loading state to the input Boolean false
iconIcon name to be added String
icon-packIcon pack to use String mdi, fa, fas, far, fad, falmdi
unselectable-timesArray of unselectable times (Date object) Array -
mobile-nativeEnable native timepicker on mobile Boolean true, falsetrue
positionOptional, position of the timepicker relative to the input String is-top-right, is-top-left, is-bottom-leftBottom right
open-on-focusOpen timepicker on input focus Boolean false
Any native attribute

This page is open source. Noticed a typo or something's unclear?

Improve this page on GitHub