Datepicker

An input with a simple dropdown/modal for selecting a date, uses native datepicker for mobile

<template>
    <section>
        <b-field grouped group-multiline>
            <b-field>
                <div class="control">
                    <b-switch v-model="showWeekNumber">Show week number</b-switch>
                </div>
            </b-field>
            <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>
                </b-select>
            </b-field>
        </b-field>
        <b-field label="Select a date">
            <b-datepicker
                v-model="selected"
                :show-week-number="showWeekNumber"
                :locale="locale"
                placeholder="Click to select..."
                icon="calendar-today"
                :icon-right="selected ? 'close-circle' : ''"
                icon-right-clickable
                @icon-right-click="clearDate"
                trap-focus>
            </b-datepicker>
        </b-field>
    </section>
</template>

<script>
export default {
    data() {
        return {
            selected: new Date(),
            showWeekNumber: false,
            locale: undefined // Browser locale
        }
    },
    methods: {
        clearDate () {
            this.selected = null
        }
    }
}
</script>


# Editable (non readonly)

Use editable prop to let the user type a date.

Datepicker will try to parse the date using the specified locale format (or the browser locale if not defined). Note that it will fallback to Date.parse() which only works for mm-dd-yyyy format. If it does not fit your requirements, you have to pass a custom one with date-parser prop, or by setting a constructor option.
Current locale format: 12/25/2000
<template>
    <section>
        <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>
            </b-select>
            Current locale format: {{ sampleFormat }}
        </b-field>
        <b-field label="Select a date">
            <b-datepicker
                placeholder="Type or select a date..."
                icon="calendar-today"
                :locale="locale"
                editable>
            </b-datepicker>
        </b-field>
    </section>
</template>

<script>
export default {
    data() {
        return {
            locale: undefined // Browser locale
        }
    },
    computed: {
        sampleFormat() {
            const dtf = new Intl.DateTimeFormat(this.locale)
            return dtf.format(new Date(2000, 11, 25, 12))
        }
    }
}
</script>

# Range

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

<template>
    <b-field label="Select a date">
        <b-datepicker
            placeholder="Click to select..."
            :min-date="minDate"
            :max-date="maxDate">
        </b-datepicker>
    </b-field>
</template>

<script>
    export default {
        data() {
            const today = new Date()

            return {
                date: new Date(),
                minDate: new Date(today.getFullYear() - 80, today.getMonth(), today.getDate()),
                maxDate: new Date(today.getFullYear() + 18, today.getMonth(), today.getDate())
            }
        }
    }
</script>

Any slots are added to the footer of the datepicker.

<template>
    <b-field label="Select a date">
        <b-datepicker v-model="date"
            :first-day-of-week="1"
            placeholder="Click to select...">

            <b-button
                label="Today"
                type="is-primary"
                icon-left="calendar-today"
                @click="date = new Date()" />

            <b-button
                label="Clear"
                type="is-danger"
                icon-left="close"
                outlined
                @click="date = null" />
        </b-datepicker>
    </b-field>
</template>

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

You can add your custom header to the datepicker.

<template>
    <b-field label="Select a date">
        <b-datepicker :focused-date="date"
            :first-day-of-week="1"
            placeholder="Click to select...">

            <template #header>
                <b-field>
                    <b-autocomplete
                        open-on-focus
                        readonly
                        v-model="month"
                        :data="months"
                        field="name"
                        @select="selectMonth">
                    </b-autocomplete>
                    <p class="control">
                        <span class="button is-static">{{ date.getFullYear() }}</span>
                    </p>
                </b-field>
            </template>

        </b-datepicker>
    </b-field>
</template>

<script>
    export default {
        data() {
            return {
                date: new Date(),
                month: null,
                months: [
                    { name: 'January', value: 0 },
                    { name:'February', value: 1 },
                    { name:'March', value: 2 },
                    { name:'April', value: 3 },
                    { name:'May', value: 4 },
                    { name:'June', value: 5 },
                    { name:'July', value: 6 },
                    { name:'August', value: 7 },
                    { name:'September', value: 8 },
                    { name:'October', value: 9 },
                    { name:'November', value: 10 },
                    { name:'December', value: 11 }
                ]
            }
        },
        methods: {
            selectMonth(option) {
                if (option) {
                    this.date = new Date(this.date)
                    this.date.setMonth(option.value)
                }
            }
        },
        mounted() {
            this.month = this.months.filter((item) =>
                item.value == this.date.getMonth()
            )[0].name
        }
    }
</script>

# Trigger

You can add your custom trigger component/s to the datepicker.

Since0.9.0
You should disable the default mobile-native in order to avoid a different UI on mobile
<template>
    <section>
        <b-field label="Select a date" grouped>
            <b-datepicker v-model="selected" :mobile-native="false">
                <template v-slot:trigger>
                    <b-button
                        icon-left="calendar-today"
                        type="is-primary" />
                </template>
            </b-datepicker>
            <b-input expanded readonly :value="selectedString" />
        </b-field>
    </section>
</template>

<script>
export default {
    data() {
        return {
            selected: null
        }
    },
    computed: {
        selectedString() {
            return this.selected ? this.selected.toDateString() : ''
        }
    }
}
</script>

# Month picker

Since0.7.7
<template>
    <b-field label="Select a date">
        <b-datepicker
            type="month"
            placeholder="Click to select..."
            icon="calendar-today"
            trap-focus>
        </b-datepicker>
    </b-field>
</template>

# Programmatically opening

Since0.7.7
<template>
    <section>
        <b-field>
            <b-datepicker
                ref="datepicker"
                expanded
                placeholder="Select a date">
            </b-datepicker>
            <b-button
                @click="$refs.datepicker.toggle()"
                icon-left="calendar-today"
                type="is-primary" />
        </b-field>
    </section>
</template>

# Inline

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

<template>
    <b-datepicker v-model="date" 
        inline 
        :unselectable-days-of-week="[0, 6]">
    </b-datepicker>
</template>

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

# Unselectable

Datepicker can have certain dates be unselectable with the unselectable-dates and unselectable-days-of-week props.

Dates after
are unselectable.
<template>
    <section>
        <b-field grouped group-multiline>
            <b-field>
                <div class="control">
                    <b-switch v-model="disableWeekends">No weekends</b-switch>
                </div>
            </b-field>
            <b-field>
                Dates after
                <b-input type="number" min="0" max="31" v-model.number="unselectableAfterDate" />
                are unselectable.
            </b-field>
        </b-field>
        <b-datepicker v-model="date"
            inline
            :unselectable-dates="unselectableDates"
            :unselectable-days-of-week="disableWeekends ? [0, 6] : null">
        </b-datepicker>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                date: new Date(),
                disableWeekends: false,
                unselectableAfterDate: 20
            }
        },
        methods: {
            unselectableDates(day) {
                return this.unselectableAfterDate < day.getDate()
            }
        }
    }
</script>

# Events

Dates can be passed to the datepicker with the events prop and shown with indicators.

<template>
    <span>
        <b-field>
            <b-switch v-model="bars">Bars</b-switch>
        </b-field>
        <b-datepicker
            inline
            v-model="date"
            :events="events"
            :indicators="indicators"
            :unselectable-dates="unselectableDates"
            >
        </b-datepicker>
    </span>
</template>

<script>
    const thisMonth = new Date().getMonth()

    export default {
        computed: {
            indicators() {
                return this.bars ? 'bars' : 'dots'
            }
        },
        data() {
            return {
                date: new Date(2017, thisMonth, 1),
                events: [
                    new Date(2017, thisMonth, 2),
                    new Date(2017, thisMonth, 6),
                    {
                        date: new Date(2017, thisMonth, 6),
                        type: 'is-info'
                    },
                    {
                        date: new Date(2017, thisMonth, 8),
                        type: 'is-danger'
                    },
                    {
                        date: new Date(2017, thisMonth, 10),
                        type: 'is-success'
                    },
                    {
                        date: new Date(2017, thisMonth, 10),
                        type: 'is-link'
                    },
                    new Date(2017, thisMonth, 12),
                    {
                        date: new Date(2017, thisMonth, 12),
                        type: 'is-warning'
                    },
                    {
                        date: new Date(2017, thisMonth, 16),
                        type: 'is-danger'
                    },
                    new Date(2017, thisMonth, 20),
                    {
                        date: new Date(2017, thisMonth, 29),
                        type: 'is-success'
                    },
                    {
                        date: new Date(2017, thisMonth, 29),
                        type: 'is-warning'
                    },
                    {
                        date: new Date(2017, thisMonth, 29),
                        type: 'is-info'
                    }
                ],
                unselectableDates: [
                    new Date(2017, thisMonth, 29)
                ],
                bars: false
            }
        }
    }
</script>

# Select a range of dates

Since0.8.2

Dates selected can be within a range.

<template>
    <b-field label="Select a date">
        <b-datepicker
            placeholder="Click to select..."
            v-model="dates"
            range>
        </b-datepicker>
    </b-field>
</template>

<script>
export default {
    data() {
        return {
            dates: []
        }
    }
}
</script>

# Select multiple dates

Since0.8.6

Multiple dates can be selected and don't have to be contiguous.

<template>
    <b-field label="Select a date">
        <b-datepicker
            placeholder="Click to select..."
            v-model="dates"
            multiple>
        </b-datepicker>
    </b-field>
</template>

<script>
export default {
    data() {
        return {
            dates: []
        }
    }
}
</script>

# API

Name
Description
Type
Values
Default
v-modelBinding valueDate
date-formatterFunction to format date to a string for display in the inputFunction(date) => new Intl.DateTimeFormat(locale, { timeZone: "UTC" }).format(date)
date-parserFunction to parse string to a date for set a date from the input to the componentFunctionTries to parse the date using the locale specific format. Fallback to Date.parse
date-creatorFunction used internally to create a new Date instanceFunction() => new Date()
min-dateEarliest date available for selectionDate
max-dateLatest date available for selectionDate
eventsDates to display indicatorsArray
indicatorsShape to use when showing event indicatorsStringdots, barsdots
focused-dateDate that should be initially focused uponDatenew Date()
sizeVertical size of input and picker, optionalStringis-small, is-medium, is-large
inlineDatepicker is shown inline, input is removedBooleanfalse
editableEnable input/typing. Note that you might have to set a custom date 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
icon-prevIcon to use for previous monthStringchevron-left
icon-nextIcon to use for next monthStringchevron-right
unselectable-datesArray of unselectable dates, or a function to identify unselectable datesArray, Function-
unselectable-days-of-weekArray of unselectable days of weekArray0 - 6 (Sunday is 0, Monday is 1, and so on)-
selectable-datesArray of selectable dates, or a function to identify selectable datesArray, Function-
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.
month-namesNames of months to display in table headerArrayundefined: default to browser locale.
day-namesNames of days to display in table headerArrayundefined: default to browser locale.
first-day-of-weekFirst day of week to display in table headerNumber0 - 6 (Sunday is 0, Monday is 1, and so on)0
mobile-nativeEnable native datepicker on mobileBooleantrue, falsetrue
mobile-modalDatepicker is shown into a modal on mobileBooleantrue, falsetrue
positionOptional, position of the datepicker relative to the inputStringis-top-right, is-top-left, is-bottom-leftBottom right
open-on-focusOpen datepicker on input focusBooleanfalse
typeType of pickerStringmonth-
years-rangeYears range relative to selected yearArray-[-100, 3]
nearby-month-daysShow/Hide nearby month days (prev and next month)Boolean-true
nearby-selectable-month-daysWhen nearby-month-days, it allows to select/unselect nearby month daysBoolean-false
show-week-numberDisplay week numberBoolean-false
week-number-clickableEnable click on week numberBoolean-false
rules-for-first-weekChoose the rule to determinate the first week of Year, 4 for ISO or 1 for otherNumber-4
rangeFlag to allow choosing a range of dateBooleanfalse
multipleFlag to allow choosing multiple datesBooleanfalse
focusableDatepicker container can be focusedBooleantrue
trap-focusTrap focus inside the datepicker.Booleantrue
close-on-clickChoose whether the Datepicker should close after selecting a dateBoolean-true
append-to-bodyAppend datepicker calendar to body (prevents event bubbling)Booleanfalse
aria-next-labelAccessibility label for the next month button.String
aria-previous-labelAccessibility label for the previous month button.String
Any native attribute

# Variables

You can use these variables to customize this component.

Name
Default
$datepicker-background-color$dropdown-content-background-color
$datepicker-radius$dropdown-content-radius
$datepicker-shadow$dropdown-content-shadow
$datepicker-header-color$grey
$datepicker-today-bordersolid 1px rgba($primary, 0.5)
$datepicker-item-color$grey-dark
$datepicker-item-disabled-color$grey-light
$datepicker-item-hover-color$scheme-invert
$datepicker-item-hover-background-color$background
$datepicker-item-selected-color$primary-invert
$datepicker-item-selected-background-color$primary

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

Improve this page on GitHub