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" variant="primary" />
            </template>
        </o-datepicker>

        <o-input readonly :value="selectedString" expanded />
    </o-field>
</section>

JS

import { computed, ref } from "vue";

const selected = ref<Date>();

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"
            variant="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 grouped>
                    <o-autocomplete
                        :options="months"
                        root-class="grow"
                        open-on-focus
                        readonly
                        expanded
                        @select="selectMonth" />
                    <o-button
                        :label="date?.getFullYear().toString()"
                        disabled />
                </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 = undefined" />
                </div>
            </template>
        </o-datepicker>
    </o-field>
</section>

JS

import { ref } from "vue";

const months = [
    { label: "January", value: 0 },
    { label: "February", value: 1 },
    { label: "March", value: 2 },
    { label: "April", value: 3 },
    { label: "May", value: 4 },
    { label: "June", value: 5 },
    { label: "July", value: 6 },
    { label: "August", value: 7 },
    { label: "September", value: 8 },
    { label: "October", value: 9 },
    { label: "November", value: 10 },
    { label: "December", value: 11 },
];

const date = ref<Date | undefined>(new Date());

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

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

SCSS

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

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

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	The active state of the dropdown, use v-model:active to make it two-way binding	boolean	-	false
ariaNextLabel	Accessibility next button aria label	string	-	From config: datepicker: {   ariaNextLabel: "Next Page" }
ariaPreviousLabel	Accessibility previous button aria label	string	-	From config: datepicker: {   ariaNextLabel: "Previous Page" }
closeOnClick	Close dropdown on click	boolean	-	From config: datepicker: {   closeOnClick: true }
creator	Date creator function, default is new Date()	(() => Date)	-	From config: datepicker: {   creator: undefined }
customValidity	Custom HTML 5 validation error to set on the form control	string | ((currentValue: Date | [] | Date[] | [Date, Date] | null, state: ValidityState) => string) | undefined	-	""
dayNames	Set custom day names, else use names based on locale	string[]	-	From config: datepicker: {   dayNames: undefined }
disabled	Same as native disabled	boolean	-	false
events	Events to display on picker	DatepickerEvent[]	-
expanded	Makes input full width when inside a grouped or addon field	boolean	-	false
firstDayOfWeek	Set the first day of a week	number	-	From config: datepicker: {   firstDayOfWeek: 0 }
focusedDate	Set default date to focus on	Date	-
formatter	Custom function to format a date into a string	((date: Date | [] | Date[] | [Date, Date]) => string) | undefined	-	From config: datepicker: {   formatter: undefined }
icon	Icon to be shown	string	-	From config: datepicker: {   icon: undefined }
iconNext	Icon name for next icon	string	-	From config: datepicker: {   iconNext: "chevron-right" }
iconPack	Icon pack to use	string	mdi, fa, fas and any other custom icon pack	From config: datepicker: {   iconPack: undefined }
iconPrev	Icon name for previous icon	string	-	From config: datepicker: {   iconPrev: "chevron-left" }
iconRight	Icon to be added on the right side	string	-	From config: datepicker: {   iconRight: undefined }
iconRightClickable	Make the icon right clickable	boolean	-	false
indicators	Event indicators for style class definiton	string	-	"dots"
inline	Display datepicker inline	boolean	-	false
locale	Date format locale	string	-	From config: {   locale: undefined }
maxDate	Max date to select	Date	-
minDate	Min date to select	Date	-
mobileBreakpoint	Mobile breakpoint as max-width value	string	-	From config: datepicker: {   mobileBreakpoint: undefined }
mobileModal	Enable dropdown mobile modal	boolean	-	From config: datepicker: {   mobileModal: true }
mobileNative	Enable mobile native input if mobile agent	boolean	-	From config: datepicker: {   mobileNative: false }
v-model	The input value state, use v-model to make it two-way binding	Date | [] | Date[] | [Date, Date]	-
monthNames	Set custom month names, else use names based on locale	string[]	-	From config: datepicker: {   monthNames: undefined }
multiple	Same as native, also push new item to v-model instead of replacing	boolean	-
nearbyMonthDays	Show nearby month days	boolean	-	From config: datepicker: {   nearbyMonthDays: true }
nearbySelectableMonthDays	Define if nearby month days can be selected	boolean	-	From config: datepicker: {   nearbySelectableMonthDays: false }
openOnFocus	Open dropdown on focus	boolean	-	From config: datepicker: {   openOnFocus: true }
override	Override existing theme classes completely	boolean	-
parser	Custom function to parse a string into a date	((date: string) => Date | [] | Date[] | [Date, Date]) | undefined	-	From config: datepicker: {   parser: undefined }
placeholder	Input placeholder	string	-
position	Position of the dropdown relative to the input	"auto" | "top" | "bottom" | "left" | "right" | "top-right" | "top-left" | "bottom-left" | "bottom-right"	auto, top, bottom, left, right, top-right, top-left, bottom-left, bottom-right
range	Enable date range selection	boolean	-
readonly	Same as native input readonly	boolean	-	false
rounded	Makes the input rounded	boolean	-	false
rulesForFirstWeek	Rules for the first week - 1 for the 1st January, 4 for the 4th January	number	-	4
selectableDates	Define a list of dates which can be selected	Date[] | ((date: Date) => boolean)	-
showWeekNumber	Show week numbers	boolean	-	From config: datepicker: {   showWeekNumber: false }
size	Size of the control input	string	small, medium, large	From config: datepicker: {   size: undefined }
teleport	Append the component to another part of the DOM. Set true to append the component to the body. In addition, any CSS selector string or an actual DOM node can be used.	string | boolean | object	-	From config: datepicker: {   teleport: false }
trapFocus	Trap dropdown on focus	boolean	-	From config: datepicker: {   trapFocus: true }
type	Define picker mode	"month" | "date"	date, month	"date"
unselectableDates	Define a list of dates which can not be selected	Date[] | ((date: Date) => boolean)	-
unselectableDaysOfWeek	Define a list of weeks which can not be selected	number[]	-	From config: datepicker: {   unselectableDaysOfWeek: undefined }
useHtml5Validation	Enable HTML 5 native validation	boolean	-	From config: {   useHtml5Validation: true }
weekNumberClickable	Define if week numbers are clickable	boolean	-	From config: datepicker: {   weekNumberClickable: false }
yearsRange	Define the range of years to show	number[]	-	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-padding	0.5rem 1rem
$datepicker-header-padding	0.5rem 0
$datepicker-header-margin	0 0 0.5rem 0
$datepicker-header-border-bottom	1px solid var(--#{$prefix}grey-lighter)
$datepicker-footer-padding	0.5rem 0.5rem 0 0.5rem
$datepicker-footer-margin	0.5rem 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-background-color	transparent
$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