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.

<template>
    <section>
        <b-field>
            <b-switch v-model="isAmPm">AM/PM</b-switch>
        </b-field>
        <b-field label="Select timepicker">
            <b-clockpicker
                placeholder="Type or select a date..."
                icon="clock"
                :hour-format="format"
                editable>
            </b-clockpicker>
        </b-field>
    </section>
</template>

<script>
export default {
    data() {
        return {
            isAmPm: false
        }
    },
    computed: {
        format() {
            return this.isAmPm ? '12' : '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">

                <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-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>
                <b-switch v-model="isAmPm">AM/PM</b-switch>
            </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"
                :hour-format="format"></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'
            ]
        }
    },
    computed: {
        format() {
            return this.isAmPm ? '12' : '24'
        }
    }
}
</script>

# API

Name
Description
Type
Values
Default
v-modelBinding value Date ——
typeType (color) of the button when checked String is-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 display String 12 or 2412
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, optional String is-small, is-medium, is-large—
inlineClockpicker is shown inline, input is removed Boolean —false
editableEnable input/typing. Note that you might have to set a custom time parser Boolean —false
disabledDisables the input field and/or picker 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
auto-switchAutomatically switches between hour and minutes selection after click Boolean true, falsetrue
open-on-focusOpen clockpicker on input focus Boolean —false
hours-labelLabel to show on hour button String —Hours
minutes-labelLabel to show on minutes button String —Min
Any native attribute— — ——

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

Improve this page on GitHub