Clockpicker

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

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

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

# Non read-only

Use editable to let the user type a time.

10:23 PM
<template>
    <section>
        <b-field grouped group-multiline>
            <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 label="Current locale format">
                {{ sampleFormat }}
            </b-field>
        </b-field>
        <b-field label="Select timepicker">
            <b-clockpicker
                placeholder="Type or select a date..."
                icon="clock"
                :hour-format="hourFormat"
                :locale="locale"
                editable>
            </b-clockpicker>
        </b-field>
    </section>
</template>

<script>
export default {
    data() {
        return {
            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 time range with min-time and max-time props.

<template>
    <div>
        <div class="columns">
            <div class="column">
                <b-field>
                    <b-switch v-model="isAmPm">AM/PM</b-switch>
                </b-field>
            </div>
            <div class="column">
                <b-field label="Min Time">
                    <b-clockpicker v-model="minTime" :hour-format="format"></b-clockpicker>
                </b-field>
            </div>
            <div class="column">
                <b-field label="Max Time">
                    <b-clockpicker v-model="maxTime" :hour-format="format"></b-clockpicker>
                </b-field>
            </div>
        </div>
        <b-field label="Select time">
            <b-clockpicker
                placeholder="Click to select..."
                :hour-format="format"
                :min-time="minTime"
                :max-time="maxTime">
            </b-clockpicker>
        </b-field>

    </div>
</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,
            isAmPm: false
        }
    },
    computed: {
        format() {
            return this.isAmPm ? '12' : '24'
        }
    }
}
</script>

Any slots are added to the footer of the clockpicker.

<template>
    <section>
        <b-field>
            <b-switch v-model="isAmPm">AM/PM</b-switch>
        </b-field>
        <b-field label="Select time">
            <b-clockpicker
                v-model="time"
                placeholder="Click to select..."
                :hour-format="format">

                <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-clockpicker>
        </b-field>
    </section>
</template>

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

# Colors

Clockpicker supports all is-<color> classes from Bulma, including custom colors added at build time. This can be specified in the class property or in the type property. Inline display is also availble by specifying the inline prop.

<template>
    <section class="columns">
        <div class="column">
            <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 label="Bulma color class"></b-field>
            <b-field v-for="color in colors" :key="color">
                <b-radio v-model="selectedColor" :native-value="color">is-{{color}}</b-radio>
            </b-field>
        </div>
        <div class="column">
            <b-clockpicker
                v-model="time"
                inline
                :type="'is-' + selectedColor"
                :locale="locale"
                :hour-format="hourFormat"></b-clockpicker>
        </div>
    </section>
</template>

<script>
export default {
    data() {
        return {
            time: new Date(),
            isAmPm: false,
            selectedColor: 'primary',
            colors: [
                'primary',
                'info',
                'success',
                'warning',
                'danger',
                'white',
                'black',
                'light',
                'dark'
            ],
            hourFormat: undefined, // Browser locale
            locale: undefined // Browser locale
        }
    }
}
</script>

# API

Name
Description
Type
Values
Default
v-modelBinding valueDate
typeType (color) of the button when checkedStringis-white, is-black, is-light, is-dark, is-primary, is-info, is-success, is-warning, is-danger, and any other colors you've set in the $colors list on Sassis-primary
hour-formatHour format for input and displayString12 or 24undefined: default to browser locale.
increment-minutesUnit for increment minutes Number5
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, optionalStringis-small, is-medium, is-large
inlineClockpicker is shown inline, input is removedBooleanfalse
editableEnable input/typing. Note that you might have to set a custom time parserBooleanfalse
disabledDisables the input field and/or pickerBooleanfalse
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, falsetrue
positionOptional, position of the timepicker relative to the inputStringis-top-right, is-top-left, is-bottom-leftBottom Right
auto-switchAutomatically switches between hour and minutes selection after clickBooleantrue, falsetrue
open-on-focusOpen clockpicker on input focusBooleanfalse
hours-labelLabel to show on hour buttonStringHours
minutes-labelLabel to show on minutes buttonStringMin
append-to-bodyAppend clockpicker 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.
Any native attribute

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

Improve this page on GitHub