Datetimepicker

An input with a simple dropdown/modal for selecting a date and time, uses native datetimepicker for mobile

<template>
    <section>
        <b-field grouped group-multiline>
            <div class="control">
                <b-switch v-model="showWeekNumber">Show week number</b-switch>
            </div>
            <div class="control">
                <b-switch v-model="formatAmPm">AM/PM</b-switch>
            </div>
            <div class="control">
                <b-switch v-model="enableSeconds">Enable seconds</b-switch>
            </div>
        </b-field>
        <b-field label="Select datetime">
            <b-datetimepicker
                rounded
                placeholder="Click to select..."
                icon="calendar-today"
                :datepicker="{ showWeekNumber }"
                :timepicker="{ enableSeconds, hourFormat: format }">
            </b-datetimepicker>
        </b-field>
    </section>
</template>

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

# Editable (non readonly)

Use editable prop to let the user type a time.

<template>
    <b-field label="Select datetime">
        <b-datetimepicker
            placeholder="Type or select a date..."
            icon="calendar-today"
            editable>
        </b-datetimepicker>
    </b-field>
</template>

# Range

You can limit the date range with min-datetime and max-datetime props.

<template>
    <b-field label="Select datetime">
        <b-datetimepicker
            placeholder="Click to select..."
            :min-datetime="minDatetime"
            :max-datetime="maxDatetime">
        </b-datetimepicker>
    </b-field>
</template>

<script>
    export default {
        data() {
            const min = new Date()
            min.setDate(min.getDate() - 7)
            min.setHours(9)
            min.setMinutes(0)
            min.setSeconds(0)
            const max = new Date()
            max.setDate(max.getDate() + 7)
            max.setHours(18)
            max.setMinutes(0)
            max.setSeconds(0)
            return {
                minDatetime: min,
                maxDatetime: max
            }
        }
    }
</script>

You can add a custom the footer to the datetimepicker using left and right slots.

<template>
    <b-field label="Select datetime">
        <b-datetimepicker v-model="datetime"
            placeholder="Click to select...">
            <template slot="left">
                <button class="button is-primary"
                    @click="datetime = new Date()">
                    <b-icon icon="clock"></b-icon>
                    <span>Now</span>
                </button>
            </template>
            <template slot="right">
                <button class="button is-danger"
                    @click="datetime = null">
                    <b-icon icon="close"></b-icon>
                    <span>Clear</span>
                </button>
            </template>
        </b-datetimepicker>
    </b-field>
</template>

<script>
    export default {
        data() {
            return {
                datetime: new Date()
            }
        }
    }
</script>

# Inline

Datetimepicker can also be shown inline with the inline prop, input is removed, set a v-model to get the date.

<template>
    <b-datetimepicker v-model="datetime" inline></b-datetimepicker>
</template>

<script>
    export default {
        data() {
            return {
                datetime: new Date()
            }
        }
    }
</script>

# API

Name
Description
Type
Values
Default
v-modelBinding value Date ——
datetime-formatterFunction to format datetime (Date type) to a string for display in the input Function —HH:mm or HH:mm AM/PM
datetime-parserFunction to parse string to a datetime (Date type) for set a datetime from the input to the component Function —HH:mm or HH:mm AM/PM
min-datetimeEarliest datetime available for selection Date ——
max-datetimeLatest datetime available for selection Date ——
sizeVertical size of input and picker, optional String is-small, is-medium, is-large—
inlineDatimepicker is shown inline, input is removed Boolean —false
editableEnable input/typing. Note that you might have to set a custom time parser 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
mobile-nativeEnable native datetimepicker on mobile Boolean true
positionOptional, position of the timepicker relative to the input String is-top-right, is-top-left, is-bottom-leftBottom right
open-on-focusOpen timepicker on input focus Boolean —false
datepickerAny datepicker props Object ——
timepickerAny timepicker props Object ——
focusableDatetimepicker container can be focused Boolean —true
Any native attribute— — ——

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

Improve this page on GitHub