Datepicker

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

Show week number

Locale

Select a date

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

Locale

Current locale format: 12/25/2000

Select a date

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

Select a date

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

Select a date

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

Select a date

<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

Select a date

<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

Select a date

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

No weekends

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.

Bars

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

Select a date

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

Select a date

<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-model`	Binding value	Date	—	—
`date-formatter`	Function to format date to a string for display in the input	Function	—	`(date) => new Intl.DateTimeFormat(locale, { timeZone: "UTC" }).format(date)`
`date-parser`	Function to parse string to a date for set a date from the input to the component	Function	—	Tries to parse the date using the locale specific format. Fallback to `Date.parse`
`date-creator`	Function used internally to create a new Date instance	Function	—	`() => new Date()`
`min-date`	Earliest date available for selection	Date	—	—
`max-date`	Latest date available for selection	Date	—	—
`events`	Dates to display indicators	Array	—	—
`indicators`	Shape to use when showing event indicators	String	`dots`, `bars`	`dots`
`focused-date`	Date that should be initially focused upon	Date	—	`new Date()`
`size`	Vertical size of input and picker, optional	String	`is-small`, `is-medium`, `is-large`	—
`inline`	Datepicker is shown inline, input is removed	Boolean	—	`false`
`editable`	Enable input/typing. Note that you might have to set a custom date parser	Boolean	—	`false`
`loading`	Add the loading state to the input	Boolean	—	`false`
`icon`	Icon name to be added	String	—	—
`icon-right`	Icon name to be added on the right side	String	—	—
`icon-right-clickable`	Make the right icon clickable	Boolean	—	`false`
`icon-pack`	Icon pack to use	String	`mdi`, `fa`, `fas`, `far`, `fad`, `fal`	`mdi`
`icon-prev`	Icon to use for previous month	String	—	`chevron-left`
`icon-next`	Icon to use for next month	String	—	`chevron-right`
`unselectable-dates`	Array of unselectable dates, or a function to identify unselectable dates	Array, Function	—	-
`unselectable-days-of-week`	Array of unselectable days of week	Array	`0 - 6 (Sunday is 0, Monday is 1, and so on)`	-
`selectable-dates`	Array of selectable dates, or a function to identify selectable dates	Array, Function	—	-
`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.
`month-names`	Names of months to display in table header	Array	—	`undefined`: default to browser locale.
`day-names`	Names of days to display in table header	Array	—	`undefined`: default to browser locale.
`first-day-of-week`	First day of week to display in table header	Number	`0 - 6 (Sunday is 0, Monday is 1, and so on)`	`0`
`mobile-native`	Enable native datepicker on mobile	Boolean	`true`, `false`	`true`
`mobile-modal`	Datepicker is shown into a modal on mobile	Boolean	`true`, `false`	`true`
`position`	Optional, position of the datepicker relative to the input	String	`is-top-right`, `is-top-left`, `is-bottom-left`	Bottom right
`open-on-focus`	Open datepicker on input focus	Boolean	—	`false`
`type`	Type of picker	String	`month`	-
`years-range`	Years range relative to selected year	Array	-	`[-100, 3]`
`nearby-month-days`	Show/Hide nearby month days (prev and next month)	Boolean	-	`true`
`nearby-selectable-month-days`	When `nearby-month-days`, it allows to select/unselect nearby month days	Boolean	-	`false`
`show-week-number`	Display week number	Boolean	-	`false`
`week-number-clickable`	Enable click on week number	Boolean	-	`false`
`rules-for-first-week`	Choose the rule to determinate the first week of Year, 4 for ISO or 1 for other	Number	-	`4`
`range`	Flag to allow choosing a range of date	Boolean	—	`false`
`multiple`	Flag to allow choosing multiple dates	Boolean	—	`false`
`focusable`	Datepicker container can be focused	Boolean	—	`true`
`trap-focus`	Trap focus inside the datepicker.	Boolean	—	`true`
`close-on-click`	Choose whether the Datepicker should close after selecting a date	Boolean	-	`true`
`append-to-body`	Append datepicker calendar to body (prevents event bubbling)	Boolean	—	`false`
`aria-next-label`	Accessibility label for the next month button.	String	—	—
`aria-previous-label`	Accessibility label for the previous month button.	String	—	—
Any native attribute	—	—	—	—

Slot name	Description	Props (if scoped)
default	Footer	—
header	Header	—
trigger	Trigger	`active: Boolean`

Name	Description	Parameters
`input`	Triggers when the value of datepicker is changed	`value: Date`
`icon-right-click`	Triggers when the right icon is clickable and has been clicked	`event: $event`
`change-month`	Triggers when calendar month is changed	`month: Number(0-11)`
`change-year`	Triggers when calendar year is changed	`year: Number`
`range-start`	Triggers when user starts selecting a date range (Only when range prop is set)	`date: Date`
`range-end`	Triggers when user ends selecting a date range (Only when range prop is set)	`date: Date`
`week-number-click`	Triggers when user click on week number (Only when show-week-number and week-number-clickable props are set)	`week: Number`

Name	Description	Parameters	Return
`toggle`	Toggle activation (picker visibility)

# 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-border`	`solid 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