Skip to content

Datepicker

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

Examples

Base

Show code

Min/Max date

Show code

Range

Show code

Multiple

Show code

Trigger

Show code

Programmatically

Show code

Slots

Show code

Events

Show code

Month picker

Show code

Class props

Datepicker component

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

html
<o-datepicker></o-datepicker>

Props

Prop nameDescriptionTypeValuesDefault
activeThe active state of the dropdown, use v-model:active to make it two-way bindingboolean-false
ariaNextLabelAccessibility next button aria labelstring-
From config:
datepicker: {
  ariaNextLabel: "Next Page"
}
ariaPreviousLabelAccessibility previous button aria labelstring-
From config:
datepicker: {
  ariaNextLabel: "Previous Page"
}
closeOnClickClose dropdown on clickboolean-
From config:
datepicker: {
  closeOnClick: true
}
creatorDate creator function, default is new Date()(() => Date)-
From config:
datepicker: {
  creator: undefined
}
customValidityCustom HTML 5 validation error to set on the form controlstring | ((currentValue: Date | [] | Date[] | [Date, Date] | null , state: ValidityState) => string) | undefined-""
dayNamesSet custom day names, else use names based on localestring[]-
From config:
datepicker: {
  dayNames: undefined
}
disabledSame as native disabledboolean-false
eventsEvents to display on pickerDatepickerEvent[]-
expandedMakes input full width when inside a grouped or addon fieldboolean-false
firstDayOfWeekSet the first day of a weeknumber-
From config:
datepicker: {
  firstDayOfWeek: 0
}
focusedDateSet default date to focus onDate-
formatterCustom function to format a date into a string((date: Date | [] | Date[] | [Date, Date] ) => string) | undefined-
From config:
datepicker: {
  formatter: undefined
}
iconIcon to be shownstring-
From config:
datepicker: {
  icon: undefined
}
iconNextIcon name for next iconstring-
From config:
datepicker: {
  iconNext: "chevron-right"
}
iconPackIcon pack to usestringmdi, fa, fas and any other custom icon pack
From config:
datepicker: {
  iconPack: undefined
}
iconPrevIcon name for previous iconstring-
From config:
datepicker: {
  iconPrev: "chevron-left"
}
iconRightIcon to be added on the right sidestring-
From config:
datepicker: {
  iconRight: undefined
}
iconRightClickableMake the icon right clickableboolean-false
indicatorsEvent indicators for style class definitonstring-"dots"
inlineDisplay datepicker inlineboolean-false
localeDate format localestring-
From config:
{
  locale: undefined
}
maxDateMax date to selectDate-
minDateMin date to selectDate-
mobileBreakpointMobile breakpoint as max-width valuestring-
From config:
datepicker: {
  mobileBreakpoint: undefined
}
mobileModalEnable dropdown mobile modalboolean-
From config:
datepicker: {
  mobileModal: true
}
mobileNativeEnable mobile native input if mobile agentboolean-
From config:
datepicker: {
  mobileNative: false
}
v-modelThe input value state, use v-model to make it two-way binding[] | [Date, Date] | Date | Date[]-
monthNamesSet custom month names, else use names based on localestring[]-
From config:
datepicker: {
  monthNames: undefined
}
multipleSame as native, also push new item to v-model instead of replacingboolean-
nearbyMonthDaysShow nearby month daysboolean-
From config:
datepicker: {
  nearbyMonthDays: true
}
nearbySelectableMonthDaysDefine if nearby month days can be selectedboolean-
From config:
datepicker: {
  nearbySelectableMonthDays: false
}
openOnFocusOpen dropdown on focusboolean-
From config:
datepicker: {
  openOnFocus: true
}
overrideOverride existing theme classes completelyboolean-
parserCustom function to parse a string into a date((date: string) => Date | [] | Date[] | [Date, Date] ) | undefined-
From config:
datepicker: {
  parser: undefined
}
placeholderInput placeholderstring-
positionPosition of the dropdown relative to the input"auto" | "bottom-left" | "bottom-right" | "bottom" | "left" | "right" | "top-left" | "top-right" | "top"auto, top, bottom, left, right, top-right, top-left, bottom-left, bottom-right
rangeEnable date range selectionboolean-
readonlySame as native input readonlyboolean-false
roundedMakes the input roundedboolean-false
rulesForFirstWeekRules for the first week - 1 for the 1st January, 4 for the 4th Januarynumber-4
selectableDatesDefine a list of dates which can be selectedDate[] | ((date: Date) => boolean)-
showWeekNumberShow week numbersboolean-
From config:
datepicker: {
  showWeekNumber: false
}
sizeSize of the control inputstringsmall, medium, large
From config:
datepicker: {
  size: undefined
}
teleportAppend 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.
boolean | object | string-
From config:
datepicker: {
  teleport: false
}
trapFocusTrap dropdown on focusboolean-
From config:
datepicker: {
  trapFocus: true
}
typeDefine picker mode"date" | "month"date, month"date"
unselectableDatesDefine a list of dates which can not be selectedDate[] | ((date: Date) => boolean)-
unselectableDaysOfWeekDefine a list of weeks which can not be selectednumber[]-
From config:
datepicker: {
  unselectableDaysOfWeek: undefined
}
useHtml5ValidationEnable HTML 5 native validationboolean-
From config:
{
  useHtml5Validation: true
}
weekNumberClickableDefine if week numbers are clickableboolean-
From config:
datepicker: {
  weekNumberClickable: false
}
yearsRangeDefine the range of years to shownumber[]-
From config:
datepicker: {
  yearsRange: [-100,10]
}

Events

Event namePropertiesDescription
focusevent Event - native eventon input focus event
blurevent Event - native eventon input blur event
invalidevent Event - native eventon input invalid event
icon-clickevent Event - native eventon icon click event
icon-right-clickevent Event - native eventon icon right click event
range-startvalue Date - range start dateon range start is selected event
range-endvalue Date - range end dateon range end is selected event
update:model-valuevalue Date | Date[] - updated modelValue propmodelValue prop two-way binding
update:activevalue boolean - updated active propactive prop two-way binding
change-monthvalue number - month numberon month change event
change-yearvalue number - year numberon year change event

Slots

NameDescriptionBindings
triggerOverride the trigger
headerOverride the header
bodyOverride the body
footerDefine an additional footer

Sass variables

Current theme ➜ Oruga

SASS VariableDefault
$datepicker-font-sizevar(--#{$prefix}base-font-size)
$datepicker-box-padding0.5rem 1rem
$datepicker-header-padding0.5rem 0
$datepicker-header-margin0 0 0.5rem 0
$datepicker-header-border-bottom1px solid var(--#{$prefix}grey-lighter)
$datepicker-footer-padding0.5rem 0.5rem 0 0.5rem
$datepicker-footer-margin0.5rem 0
$datepicker-footer-border-top1px solid var(--#{$prefix}grey-lighter)
$datepicker-table-head-padding0 0 0.875rem 0
$datepicker-table-head-margin0 0 0.875rem 0
$datepicker-table-head-border-bottom1px solid var(--#{$prefix}grey-lighter)
$datepicker-table-head-item-colorvar(--#{$prefix}grey)
$datepicker-table-head-item-font-weight600
$datepicker-item-today-bordersolid 1px rgba(var(--#{$prefix}primary), 0.5)
$datepicker-item-selectable-colorvar(--#{$prefix}grey-dark)
$datepicker-item-disabled-colorvar(--#{$prefix}grey-light)
$datepicker-item-border-radiusvar(--#{$prefix}base-border-radius)
$datepicker-item-padding0.5rem 0.75rem
$datepicker-item-selected-colorvar(--#{$prefix}primary-invert)
$datepicker-item-selected-background-colorvar(--#{$prefix}primary)
$datepicker-item-selected-border-radius0
$datepicker-item-selected-within-background-colorrgb( from $datepicker-item-selected-background-color r g b / 50%)
$datepicker-item-hovered-background-colorvar(--#{$prefix}grey)
$datepicker-item-hovered-colorvar(--#{$prefix}grey-lighter)
$datepicker-item-hovered-background-color#f5f5f5
$datepicker-item-hovered-within-background-colorrgb( from $datepicker-item-hovered-background-color r g b / 50%)
$datepicker-item-nearby-colorvar(--#{$prefix}grey-light)
$datepicker-events-item-padding0.3rem 0.75rem 0.75rem
$datepicker-event-background-colorvar(--#{$prefix}grey-light)
$datepicker-event-dots-size0.35em
$datepicker-event-dots-margin0 0.1em
$datepicker-event-bars-height0.25em
$datepicker-btn-background-colortransparent
$datepicker-btn-border-colorvar(--#{$prefix}grey-lighter)
$datepicker-btn-border-radiusvar(--#{$prefix}base-border-radius)
$datepicker-btn-border1px solid transparent
$datepicker-btn-color#363636
$datepicker-btn-height2.25em
$datepicker-btn-hover-border-colorvar(--#{$prefix}grey-light)
$datepicker-btn-hover-color#363636
$datepicker-btn-line-heightvar(--#{$prefix}base-line-height)
$datepicker-btn-margin0.25rem
$datepicker-btn-min-width2.25em
$datepicker-btn-padding0.5em 0.5em

See ➜ 📄 Full scss file

Current theme ➜ Bulma

SASS VariableDefault
$datepicker-colorsvar.$colors
$datepicker-header-colorcss.getVar("grey")
$datepicker-today-bordersolid 1px rgba(css.getVar("primary"), 0.5)
$datepicker-item-colorcss.getVar("grey-dark")
$datepicker-item-disabled-colorcss.getVar("grey-light")
$datepicker-item-hover-colorcss.getVar("scheme-invert")
$datepicker-item-hover-background-colorcss.getVar("background")
$datepicker-item-selected-colorcss.getVar("primary-invert")
$datepicker-item-selected-background-colorcss.getVar("primary")
$datepicker-event-background-colorcss.getVar("grey-light")

See ➜ 📄 Full scss file

Current theme ➜ Bootstrap

SASS VariableDefault
$datepicker-background-colorvar(--#{$prefix}body-bg)
$datepicker-pagination-spacercalc($spacer * 0.5)
$datepicker-section-spacercalc($spacer * 0.75)
$datepicker-section-border1px solid var(--#{$prefix}border-color)
$datepicker-cell-padding0.5rem 0.75rem
$datepicker-cell-font-weight400
$datepicker-cell-widthcalc(#{100%} / 7)
$datepicker-cell-border-width1px
$datepicker-cell-border-colortransparent
$datepicker-cell-border-radiusvar(--#{$prefix}border-radius)
$datepicker-cell-colorvar(--#{$prefix}black)
$datepicker-cell-bgtransparent
$datepicker-cell-hovered-colorvar(--#{$prefix}secondary-contrast)
$datepicker-cell-hovered-bgvar(--#{$prefix}secondary)
$datepicker-cell-selected-colorvar(--#{$prefix}primary-contrast)
$datepicker-cell-selected-bgvar(--#{$prefix}primary)
$datepicker-month-width20rem
$datepicker-month-cell-spacercalc($spacer * 0.5)
$datepicker-month-cell-height2.5rem
$datepicker-dropdown-widthcalc(100vw - 40px)
$datepicker-dropdown-min-width380px
$datepicker-dropdown-max-width420px

See ➜ 📄 Full scss file

Released under the MIT License.