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="enableSeconds">Enable seconds</b-switch>
            </div>
            <b-field label="Locale">
                <b-select v-model="locale">
                    <option :value="undefined"></option>
                    <option value="de-DE">de-DE</option>
                    <option value="en-CA">en-CA</option>
                    <option value="en-GB">en-GB</option>
                    <option value="en-US">en-US</option>
                    <option value="es-ES">es-ES</option>
                    <option value="es-MX">es-MX</option>
                    <option value="fr-CA">fr-CA</option>
                    <option value="fr-FR">fr-FR</option>
                    <option value="it-IT">it-IT</option>
                    <option value="ja-JP">ja-JP</option>
                    <option value="pt-BR">pt-BR</option>
                    <option value="ru-RU">ru-RU</option>
                    <option value="zn-CN">zn-CN</option>
                </b-select>
            </b-field>
            <b-field label="Hour format">
                <b-select v-model="hourFormat">
                    <option :value="undefined"></option>
                    <option value="12">12</option>
                    <option value="24">24</option>
                </b-select>
            </b-field>
        </b-field>
        <b-field label="Select time">
            <b-timepicker
                rounded
                placeholder="Click to select..."
                icon="clock"
                :enable-seconds="enableSeconds"
                :hour-format="hourFormat"
                :locale="locale">
            </b-timepicker>
        </b-field>
    </section>
</template>

<script>
export default {
    data() {
        return {
            hourFormat: undefined, // Browser locale
            enableSeconds: false,
            locale: undefined // Browser locale
        }
    }
}
</script>

# Editable (non readonly)

Use editable prop to let the user type a time.

Current locale format: 10:23 PM
<template>
    <section>
        <b-field grouped group-multiline>
            <div class="control">
                <b-switch v-model="enableSeconds">Enable seconds</b-switch>
            </div>
            <b-field label="Locale">
                <b-select v-model="locale">
                    <option :value="undefined"></option>
                    <option value="de-DE">de-DE</option>
                    <option value="en-CA">en-CA</option>
                    <option value="en-GB">en-GB</option>
                    <option value="en-US">en-US</option>
                    <option value="es-ES">es-ES</option>
                    <option value="es-MX">es-MX</option>
                    <option value="fr-CA">fr-CA</option>
                    <option value="fr-FR">fr-FR</option>
                    <option value="it-IT">it-IT</option>
                    <option value="ja-JP">ja-JP</option>
                    <option value="pt-BR">pt-BR</option>
                    <option value="ru-RU">ru-RU</option>
                    <option value="zn-CN">zn-CN</option>
                </b-select>
            </b-field>
            <b-field label="Hour format">
                <b-select v-model="hourFormat">
                    <option :value="undefined"></option>
                    <option value="12">12</option>
                    <option value="24">24</option>
                </b-select>
            </b-field>
            Current locale format: {{ sampleFormat }}
        </b-field>
        <b-field label="Select time">
            <b-timepicker
                rounded
                placeholder="Click to select..."
                icon="clock"
                editable
                :enable-seconds="enableSeconds"
                :hour-format="hourFormat"
                :locale="locale">
            </b-timepicker>
        </b-field>
    </section>
</template>

<script>
export default {
    data() {
        return {
            enableSeconds: false,
            hourFormat: undefined, // Browser locale
            locale: undefined // Browser locale
        }
    },
    computed: {
        sampleFormat() {
            const dtf = new Intl.DateTimeFormat(this.locale, {
                hour: 'numeric',
                minute: 'numeric',
                second: this.enableSeconds ? 'numeric' : undefined,
                hour12: this.hourFormat ? this.hourFormat === '12' : undefined
            })
            return dtf.format(new Date(2000, 12, 12, 22, 23, 24))
        }
    }
}
</script>

# 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>

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...">

            <b-button
                label="Now"
                type="is-primary"
                icon-left="clock"
                @click="time = new Date()" />
            <b-button
                label="Clear"
                type="is-danger"
                icon-left="close"
                outlined
                @click="time = null" />
        </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>

# Granularity

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
Values
Default
v-modelBinding valueDate
hour-formatHour format for input and displayString12 or 24undefined: default to browser locale.
increment-minutesStep minutes for select componentNumber1
time-formatterFunction to format time (Date type) to a string for display in the inputFunction(time) => new Intl.DateTimeFormat(locale).format(time)
time-parserFunction to parse string to a time (Date type) for set a time from the input to the componentFunctionTries to parse the time using the locale specific format. Fallback to HH:mm or HH:mm AM/PM
min-timeEarliest time available for selectionDate
max-timeLatest time available for selectionDate
sizeVertical size of input and picker, optionalStringis-small, is-medium, is-large
inlineTimepicker is shown inline, input is removedBooleanfalse
editableEnable input/typing. Note that you might have to set a custom time parserBooleanfalse
loadingAdd the loading state to the inputBooleanfalse
iconIcon name to be addedString
icon-packIcon pack to useStringmdi, fa, fas, far, fad, falmdi
unselectable-timesArray of unselectable times (Date object)Array-
mobile-nativeEnable native timepicker on mobileBooleantrue
positionOptional, position of the timepicker relative to the inputStringis-top-right, is-top-left, is-bottom-leftBottom right
open-on-focusOpen timepicker on input focusBooleanfalse
enable-secondsShow seconds pickerBoolean-false
default-minutesDefault value when hours changeNumber--
default-secondsDefault value when hours or minutes changeNumber--
time-creatorFunction used internally to create a new Date instanceFunction() => new Date()
focusableTimepicker container can be focusedBooleantrue
append-to-bodyAppend timepicker calendar to bodyBooleanfalse
localeAccept a string with a BCP 47 language tag, or an array of such strings. See Unicode BCP 47 locale identifierString, Array of Stringundefined: default to browser locale.
reset-on-meridian-changeReset timepicker values on meridian changeBooleanfalse
Any native attribute

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

Improve this page on GitHub