Timepicker

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

<template>
    <section>
        <b-field grouped group-multiline>
            <div class="control">
                <b-switch v-model="formatAmPm">AM/PM</b-switch>
            </div>
            <div class="control">
                <b-switch v-model="enableSeconds">Enable seconds</b-switch>
            </div>
        </b-field>
        <b-field label="Select time">
            <b-timepicker
                rounded
                placeholder="Click to select..."
                icon="clock"
                :enable-seconds="enableSeconds"
                :hour-format="format">
            </b-timepicker>
        </b-field>
    </section>
</template>

<script>
export default {
    data() {
        return {
            formatAmPm: false,
            enableSeconds: 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>

Ganularity

Timepicker can be set with a minute or hour ganularity with incrementMinutes or incrementHours.

<template>
    <b-field label="Select timepicker">
        <b-timepicker
            placeholder="Click to select"
            icon="clock"
            :incrementMinutes="minutesGranularity"
            :incrementHours="hoursGranularity"
            >
        </b-timepicker>
    </b-field>
</template>

<script>
export default {
    data() {
        return {
            minutesGranularity: 15,
            hoursGranularity: 2
        }
    }
}
</script>

API

Name
Description
Type
Value
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, falfa
unselectable-timesArray of unselectable times (Date object) Array —-
mobile-nativeEnable native timepicker on mobile Boolean true
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
enable-secondsShow seconds picker Boolean -false
default-minutesDefault value when hours change Number --
default-secondsDefault value when hours or minutes change Number --
Any native attribute— — ——