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="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="First day of week">
                <b-select v-model="firstDayOfWeek">
                    <option :value="undefined"></option>
                    <option :value="0">Sunday</option>
                    <option :value="1">Monday</option>
                    <option :value="2">Tuesday</option>
                    <option :value="3">Wednesday</option>
                    <option :value="4">Thursday</option>
                    <option :value="5">Friday</option>
                    <option :value="6">Saturday</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 datetime">
            <b-datetimepicker
                v-model="selected"
                rounded
                placeholder="Click to select..."
                icon="calendar-today"
                :icon-right="selected ? 'close-circle' : ''"
                icon-right-clickable
                @icon-right-click="clearDateTime"
                :locale="locale"
                :first-day-of-week="firstDayOfWeek"
                :datepicker="{ showWeekNumber }"
                :timepicker="{ enableSeconds, hourFormat }"
                horizontal-time-picker>
            </b-datetimepicker>
        </b-field>
    </section>
</template>

<script>
export default {
    data() {
        return {
            selected: new Date(),
            showWeekNumber: false,
            enableSeconds: false,
            hourFormat: undefined, // Browser locale
            locale: undefined, // Browser locale
            firstDayOfWeek: undefined // 0 - Sunday
        }
    },
    methods: {
        clearDateTime () {
            this.selected = null
        }
    }
}
</script>

# Editable (non readonly)

Use editable prop to let the user type a time.

Current locale format: 12/11/2020, 1:14 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>
        Current locale format: {{ sampleFormat }}
        <b-field label="Select datetime">
            <b-datetimepicker
                placeholder="Type or select a date..."
                icon="calendar-today"
                :locale="locale"
                editable>
            </b-datetimepicker>
        </b-field>
    </section>
</template>

<script>
export default {
    data() {
        return {
            locale: undefined // Browser locale
        }
    },
    computed: {
        sampleFormat() {
            const dtf = new Intl.DateTimeFormat(this.locale, {
                year: 'numeric',
                month: 'numeric',
                day: 'numeric',
                hour: 'numeric',
                minute: 'numeric',
                second: this.enableSeconds ? 'numeric' : undefined
            })
            return dtf.format(new Date(2020, 11, 11, 13, 14, 15))
        }
    }
}
</script>

# 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 #left>
                <b-button
                    label="Now"
                    type="is-primary"
                    icon-left="clock"
                    @click="datetime = new Date()" />
            </template>

            <template #right>
                <b-button
                    label="Clear"
                    type="is-danger"
                    icon-left="close"
                    outlined
                    @click="datetime = null" />
            </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>

# Granularity

Datetimepicker can be set with a minute or hour ganularity with incrementMinutes or incrementHours.

<template>
    <b-field label="Select datetime">
        <b-datetimepicker
            placeholder="Select a date"
            icon="calendar-today"
            :timepicker="timepicker"
            >
        </b-datetimepicker>
    </b-field>
</template>
<script>
export default {
    data() {
        return {
            timepicker: {
                incrementMinutes: 15,
                incrementHours: 2
            }
        }
    },
}
</script>

# API

Name
Description
Type
Values
Default
v-modelBinding valueDate
datetime-formatterFunction to format datetime (Date type) to a string for displaying in the inputFunction(time) => new Intl.DateTimeFormat(locale).format(time)
datetime-parserFunction to parse string to a datetime (Date type) for setting the component's datetime from the inputFunctionTries to parse the time using the locale specific format. Fallback to HH:mm or HH:mm AM/PM
min-datetimeEarliest datetime available for selectionDate
max-datetimeLatest datetime available for selectionDate
first-day-of-weekFirst day of week to display in table headerNumber0 - 6 (Sunday is 0, Monday is 1, and so on)0
sizeVertical size of input and picker, optionalStringis-small, is-medium, is-large
inlineDatimepicker is shown inline, input is removedBooleanfalse
editableEnable input/typing. Note that you might have to set a custom time parserBooleanfalse
loadingAdd the loading state to the inputBooleanfalse
iconIcon name to be addedString
icon-rightIcon name to be added on the right sideString
icon-right-clickableMake the right icon clickableBooleanfalse
icon-packIcon pack to useStringmdi, fa, fas, far, fad, falmdi
mobile-nativeEnable native datetimepicker on mobileBooleantrue
positionOptional, position of the timepicker relative to the inputStringis-top-right, is-top-left, is-bottom-leftBottom right
open-on-focusOpen timepicker on input focusBooleanfalse
datepickerAny datepicker propsObject
timepickerAny timepicker propsObject
focusableDatetimepicker container can be focusedBooleantrue
horizontal-time-pickerChanges the time picker layout to a horizontal positionBooleanfalse
append-to-bodyAppend datetimepicker calendar to body (prevents event bubbling)Booleanfalse
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