Datepicker

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

Examples

Base

Show code

HTML

<section>
    <o-field grouped>
        <o-field label="Locale">
            <o-select v-model="locale" placeholder="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>
            </o-select>
        </o-field>
        <o-field label="Show week number">
            <o-switch v-model="showWeekNumber" />
        </o-field>
    </o-field>

    <o-field label="Select a date">
        <o-datepicker
            v-model="selected"
            :show-week-number="showWeekNumber"
            :locale="locale"
            placeholder="Click to select..."
            icon="calendar"
            trap-focus />
    </o-field>

    <p><b>Selected:</b> {{ selected }}</p>
</section>

JS

import { ref } from "vue";

const selected = ref(new Date());
const showWeekNumber = ref(false);
const locale = ref(); // Browser locale

Min/Max date

Show code

HTML

<section>
    <o-field label="Select a date">
        <o-datepicker
            placeholder="Click to select..."
            icon="calendar"
            :min-date="minDate"
            :max-date="maxDate" />
    </o-field>
</section>

JS

const today = new Date();
const minDate = new Date(
    today.getFullYear(),
    today.getMonth(),
    today.getDate() - 7,
);
const maxDate = new Date(
    today.getFullYear(),
    today.getMonth(),
    today.getDate() + 7,
);

Range

Show code

HTML

<section>
    <o-field label="Select a date">
        <o-datepicker
            v-model="dates"
            placeholder="Click to select..."
            icon="calendar"
            trap-focus
            range />
    </o-field>

    <p><b>Selected:</b> {{ dates }}</p>
</section>

JS

import { ref } from "vue";

const dates = ref<[Date, Date] | []>([]);

Multiple

Show code

HTML

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

    <p><b>Selected:</b> {{ dates }}</p>
</section>

JS

import { ref } from "vue";

const dates = ref<Date[]>([]);

Trigger

Show code

HTML

<section>
    <o-field label="Select a date" grouped>
        <o-datepicker v-model="selected" teleport>
            <template #trigger>
                <o-button icon-left="calendar" type="primary" />
            </template>
        </o-datepicker>
        <o-input readonly :value="selectedString" expanded />
    </o-field>
</section>

JS

import { computed, ref } from "vue";

const selected = ref(null);
const selectedString = computed(() =>
    selected.value ? selected.value.toDateString() : "",
);

Programmatically

Show code

HTML

<section>
    <o-field expanded addons>
        <o-datepicker
            v-model:active="active"
            expanded
            placeholder="Select a date" />
        <o-button
            icon-left="calendar"
            type="primary"
            @click="active = !active" />
    </o-field>
</section>

JS

import { ref } from "vue";

const active = ref(false);

Slots

Show code

HTML

<section>
    <o-field label="Select a date">
        <o-datepicker
            v-model="date"
            :first-day-of-week="1"
            placeholder="Click to select...">
            <template #header>
                <o-field>
                    <o-autocomplete
                        v-model="month"
                        root-class="grow"
                        open-on-focus
                        readonly
                        :data="months"
                        field="name"
                        expanded
                        @select="selectMonth" />
                    <o-button
                        disabled
                        :label="date?.getFullYear().toString()" />
                </o-field>
            </template>
            <template #footer>
                <div class="footer-container">
                    <o-button
                        variant="primary"
                        icon-left="calendar"
                        label="Today"
                        @click="date = new Date()" />
                    <o-button
                        variant="danger"
                        icon-left="times"
                        label="Clear"
                        @click="date = null" />
                </div>
            </template>
        </o-datepicker>
    </o-field>
</section>

JS

import { onMounted, ref } from "vue";

const 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 },
];

const date = ref(new Date());
const month = ref(null);

function selectMonth(option) {
    if (!option) return;

    date.value = new Date(date.value);
    date.value.setMonth(option.value);
}

onMounted(() => {
    month.value = months.filter(
        (item) => item.value == date.value.getMonth(),
    )[0].name;
});

SCSS

.footer-container {
    display: flex;
    justify-content: end;
    margin-top: 0.5rem;

    button {
        margin-left: 0.5rem;
    }
}
.grow {
    flex-grow: 1;
}

Events

Show code

HTML

<section>
    <o-field>
        <o-switch v-model="bars" label="Bars" />
    </o-field>

    <o-datepicker
        v-model="date"
        inline
        :events="events"
        :indicators="indicators" />
</section>

JS

import { ref, computed } from "vue";

const thisMonth = new Date().getMonth();

const bars = ref(false);
const date = ref(new Date(2017, thisMonth, 1));
const indicators = computed(() => (bars.value ? "bars" : "dots"));

const events = [
    { date: new Date(2017, thisMonth, 2) },
    { date: new Date(2017, thisMonth, 6) },
    {
        date: new Date(2017, thisMonth, 6),
        type: "info",
    },
    {
        date: new Date(2017, thisMonth, 8),
        type: "danger",
    },
    {
        date: new Date(2017, thisMonth, 10),
        type: "success",
    },
    {
        date: new Date(2017, thisMonth, 10),
        type: "link",
    },
    { date: new Date(2017, thisMonth, 12) },
    {
        date: new Date(2017, thisMonth, 12),
        type: "warning",
    },
    {
        date: new Date(2017, thisMonth, 16),
        type: "danger",
    },
    { date: new Date(2017, thisMonth, 20) },
    {
        date: new Date(2017, thisMonth, 29),
        type: "success",
    },
    {
        date: new Date(2017, thisMonth, 29),
        type: "warning",
    },
    {
        date: new Date(2017, thisMonth, 29),
        type: "info",
    },
];

Month picker

Show code

HTML

<section>
    <o-field label="Select a month">
        <o-datepicker
            placeholder="Click to select..."
            icon="calendar"
            type="month" />
    </o-field>
</section>

Class props

'Classes applied to the element'

Datepicker component

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

<o-datepicker></o-datepicker>

Props

Prop name	Description	Type	Values	Default
active			-	false
ariaNextLabel			-	From config: datepicker: {   ariaNextLabel: "Next Page" }
ariaPreviousLabel			-	From config: datepicker: {   ariaNextLabel: "Previous Page" }
closeOnClick			-	From config: datepicker: {   closeOnClick: true }
customValidity			-	""
dateCreator			-	From config: datepicker: {   dateCreator: () => new Date() }
dateFormatter			-	From config: datepicker: {   dateFormatter: () => undefined, }
dateParser			-	From config: datepicker: {   dateParser: () => undefined, }
dayNames			-	From config: datepicker: {   dayNames: undefined }
disabled			-	false
events			-
expanded			-	false
firstDayOfWeek			-	From config: datepicker: {   firstDayOfWeek: 0 }
focusedDate			-
icon			-	From config: datepicker: {   icon: undefined }
iconNext			-	From config: datepicker: {   iconNext: "chevron-right" }
iconPack			-	From config: datepicker: {   iconPack: undefined }
iconPrev			-	From config: datepicker: {   iconPrev: "chevron-left" }
iconRight			-	From config: datepicker: {   iconRight: undefined }
iconRightClickable			-	false
indicators			-	"dots"
inline			-	false
locale			-	From config: {   locale: undefined }
maxDate			-
minDate			-
mobileBreakpoint			-	From config: datepicker: {   mobileBreakpoint: undefined }
mobileModal			-	From config: datepicker: {   mobileModal: true }
mobileNative			-	From config: datepicker: {   mobileNative: false }
v-model			-	null
monthNames			-	From config: datepicker: {   monthNames: undefined }
nearbyMonthDays			-	From config: datepicker: {   nearbyMonthDays: true }
nearbySelectableMonthDays			-	From config: datepicker: {   nearbySelectableMonthDays: false }
openOnFocus			-	From config: datepicker: {   openOnFocus: true }
override			-
placeholder			-
position			-
readonly			-	false
rounded			-	false
rulesForFirstWeek			-	4
selectableDates			-
showWeekNumber			-	From config: datepicker: {   showWeekNumber: false }
size			-	From config: datepicker: {   size: undefined }
teleport			-	From config: datepicker: {   teleport: false }
trapFocus			-	From config: datepicker: {   trapFocus: true }
type			-	"date"
unselectableDates			-
unselectableDaysOfWeek			-	From config: datepicker: {   unselectableDaysOfWeek: undefined }
useHtml5Validation			-	From config: {   useHtml5Validation: true }
weekNumberClickable			-	From config: datepicker: {   weekNumberClickable: false }
yearsRange			-	From config: datepicker: {   yearsRange: [-100,10] }

Events

Event name	Properties	Description
focus	event Event - native event	on input focus event
blur	event Event - native event	on input blur event
invalid	event Event - native event	on input invalid event
icon-click	event Event - native event	on icon click event
icon-right-click	event Event - native event	on icon right click event
range-start	value Date - range start date	on range start is selected event
range-end	value Date - range end date	on range end is selected event
update:modelValue	value Date | Date[] - updated modelValue prop	modelValue prop two-way binding
update:active	value boolean - updated active prop	active prop two-way binding
change-month	value number - month number	on month change event
change-year	value number - year number	on year change event

Slots

Name	Description	Bindings
trigger	Override the trigger
header	Override the header
body	Override the body
footer	Define an additional footer

Sass variables

Current theme ➜ Oruga

SASS Variable	Default
$datepicker-font-size	var(--#{$prefix}base-font-size)
$datepicker-box-line-height	var(--#{$prefix}base-line-height)
$datepicker-box-padding	0.375rem 1rem
$datepicker-header-padding	0 0 0.875rem 0
$datepicker-header-margin	0 0 0.875rem 0
$datepicker-header-border-bottom	1px solid var(--#{$prefix}grey-lighter)
$datepicker-footer-padding	0.875rem 0.5rem 0 0.5rem
$datepicker-footer-margin	0.875rem 0 0.875rem 0
$datepicker-footer-border-top	1px solid var(--#{$prefix}grey-lighter)
$datepicker-table-head-padding	0 0 0.875rem 0
$datepicker-table-head-margin	0 0 0.875rem 0
$datepicker-table-head-border-bottom	1px solid var(--#{$prefix}grey-lighter)
$datepicker-table-head-item-color	var(--#{$prefix}grey)
$datepicker-table-head-item-font-weight	600
$datepicker-item-today-border	solid 1px rgba(var(--#{$prefix}primary), 0.5)
$datepicker-item-selectable-color	var(--#{$prefix}grey-dark)
$datepicker-item-disabled-color	var(--#{$prefix}grey-light)
$datepicker-item-border-radius	var(--#{$prefix}base-border-radius)
$datepicker-item-padding	0.5rem 0.75rem
$datepicker-item-selected-color	var(--#{$prefix}primary-invert)
$datepicker-item-selected-background-color	var(--#{$prefix}primary)
$datepicker-item-selected-border-radius	0
$datepicker-item-selected-within-background-color	rgb( from $datepicker-item-selected-background-color r g b / 50%)
$datepicker-item-hovered-background-color	var(--#{$prefix}grey)
$datepicker-item-hovered-color	var(--#{$prefix}grey-lighter)
$datepicker-item-hovered-background-color	#f5f5f5
$datepicker-item-hovered-within-background-color	rgb( from $datepicker-item-hovered-background-color r g b / 50%)
$datepicker-item-nearby-color	var(--#{$prefix}grey-light)
$datepicker-events-item-padding	0.3rem 0.75rem 0.75rem
$datepicker-event-background-color	var(--#{$prefix}grey-light)
$datepicker-event-dots-size	0.35em
$datepicker-event-dots-margin	0 0.1em
$datepicker-event-bars-height	0.25em
$datepicker-btn-border-color	var(--#{$prefix}grey-lighter)
$datepicker-btn-border-radius	var(--#{$prefix}base-border-radius)
$datepicker-btn-border	1px solid transparent
$datepicker-btn-color	#363636
$datepicker-btn-height	2.25em
$datepicker-btn-hover-border-color	var(--#{$prefix}grey-light)
$datepicker-btn-hover-color	#363636
$datepicker-btn-line-height	var(--#{$prefix}base-line-height)
$datepicker-btn-margin	0.25rem
$datepicker-btn-min-width	2.25em
$datepicker-btn-padding	0.5em 0.5em

See ➜ 📄 Full scss file

Current theme ➜ Bulma

SASS Variable	Default
$datepicker-colors	var.$colors
$datepicker-header-color	css.getVar("grey")
$datepicker-today-border	solid 1px rgba(css.getVar("primary"), 0.5)
$datepicker-item-color	css.getVar("grey-dark")
$datepicker-item-disabled-color	css.getVar("grey-light")
$datepicker-item-hover-color	css.getVar("scheme-invert")
$datepicker-item-hover-background-color	css.getVar("background")
$datepicker-item-selected-color	css.getVar("primary-invert")
$datepicker-item-selected-background-color	css.getVar("primary")
$datepicker-event-background-color	css.getVar("grey-light")

See ➜ 📄 Full scss file

Current theme ➜ Bootstrap

SASS Variable	Default
$datepicker-background-color	var(--#{$prefix}body-bg)
$datepicker-pagination-spacer	calc($spacer * 0.5)
$datepicker-section-spacer	calc($spacer * 0.75)
$datepicker-section-border	1px solid var(--#{$prefix}border-color)
$datepicker-cell-padding	0.5rem 0.75rem
$datepicker-cell-font-weight	400
$datepicker-cell-width	calc(#{100%} / 7)
$datepicker-cell-border-width	1px
$datepicker-cell-border-color	transparent
$datepicker-cell-border-radius	var(--#{$prefix}border-radius)
$datepicker-cell-color	var(--#{$prefix}black)
$datepicker-cell-bg	transparent
$datepicker-cell-hovered-color	var(--#{$prefix}secondary-contrast)
$datepicker-cell-hovered-bg	var(--#{$prefix}secondary)
$datepicker-cell-selected-color	var(--#{$prefix}primary-contrast)
$datepicker-cell-selected-bg	var(--#{$prefix}primary)
$datepicker-month-width	20rem
$datepicker-month-cell-spacer	calc($spacer * 0.5)
$datepicker-month-cell-height	2.5rem
$datepicker-dropdown-width	calc(100vw - 40px)
$datepicker-dropdown-min-width	380px
$datepicker-dropdown-max-width	420px

See ➜ 📄 Full scss file