Clockpicker

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

AM/PM

Select time

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

Locale

Hour format

Current locale format 10:23 PM

Select timepicker

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

AM/PM

Min Time

Max Time

Select time

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

AM/PM

Select time

<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-model`	Binding value	Date	—	—
`type`	Type (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 Sass	`is-primary`
`hour-format`	Hour format for input and display	String	`12` or `24`	`undefined`: default to browser locale.
`increment-minutes`	Unit for increment minutes	Number	—	`5`
`time-formatter`	Function to format time (`Date` type) to a string for display in the input	Function	—	`(time) => new Intl.DateTimeFormat(locale).format(time)`
`time-parser`	Function to parse string to a time (`Date` type) for set a time from the input to the component	Function	—	Tries to parse the time using the locale specific format. Fallback to `HH:mm` or `HH:mm AM/PM`
`min-time`	Earliest time available for selection	Date	—	—
`max-time`	Latest time available for selection	Date	—	—
`size`	Vertical size of input, optional	String	`is-small`, `is-medium`, `is-large`	—
`inline`	Clockpicker is shown inline, input is removed	Boolean	—	`false`
`editable`	Enable input/typing. Note that you might have to set a custom time parser	Boolean	—	`false`
`disabled`	Disables the input field and/or picker	Boolean	—	`false`
`loading`	Add the loading state to the input	Boolean	—	`false`
`icon`	Icon name to be added	String	—	—
`icon-pack`	Icon pack to use	String	`mdi`, `fa`, `fas`, `far`, `fad`, `fal`	`mdi`
`unselectable-times`	Array of unselectable times (Date object)	Array	—	-
`mobile-native`	Enable native timepicker on mobile	Boolean	`true`, `false`	`true`
`mobile-modal`	Clockpicker is shown into a modal on mobile	Boolean	`true`, `false`	`true`
`position`	Optional, position of the timepicker relative to the input	String	`is-top-right`, `is-top-left`, `is-bottom-left`	`Bottom Right`
`auto-switch`	Automatically switches between hour and minutes selection after click	Boolean	`true`, `false`	`true`
`open-on-focus`	Open clockpicker on input focus	Boolean	—	`false`
`hours-label`	Label to show on hour button	String	—	`Hours`
`minutes-label`	Label to show on minutes button	String	—	`Min`
`append-to-body`	Append clockpicker calendar to body (prevents event bubbling)	Boolean	—	`false`
`locale`	Accept a string with a BCP 47 language tag, or an array of such strings. See Unicode BCP 47 locale identifier	String, Array of String	—	`undefined`: default to browser locale.
Any native attribute	—	—	—	—

Slot name	Description	Props (if scoped)
default	Footer	—
trigger	Trigger	—

Name	Description	Parameters	Return
`close`	Close dropdown

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

Improve this page on GitHub