Timepicker

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

Enable seconds

Locale

Hour format

Select time

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

Enable seconds

Locale

Hour format

Current locale format: 22:23

Select time

<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,
                // Fixes 12 hour display github.com/buefy/buefy/issues/3418
                hourCycle: this.hourFormat === '12' ? 'h12' : 'h23'
            })
            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.

Select time

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

Select time

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

Select timepicker

<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-model`	Binding value	Date	—	—
`hour-format`	Hour format for input and display	String	`12` or `24`	`undefined`: default to browser locale.
`increment-hours`	Step hours for select component	Number	—	`1`
`increment-minutes`	Step minutes for select component	Number	—	`1`
`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 and picker, optional	String	`is-small`, `is-medium`, `is-large`	—
`inline`	Timepicker 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`
`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`
`mobile-modal`	Timepicker 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
`open-on-focus`	Open timepicker on input focus	Boolean	—	`false`
`enable-seconds`	Show seconds picker	Boolean	-	`false`
`default-minutes`	Default value when hours change	Number	-	-
`default-seconds`	Default value when hours or minutes change	Number	-	-
`time-creator`	Function used internally to create a new Date instance	Function	—	`() => new Date()`
`focusable`	Timepicker container can be focused	Boolean	—	`true`
`append-to-body`	Append timepicker 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.
`reset-on-meridian-change`	Reset timepicker values on meridian change	Boolean	—	`false`
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