Oruga
Theme ➜ Bulma

Datepicker ​

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

Examples ​

Base

Selected: Sun Apr 06 2025 11:16:27 GMT+0000 (Coordinated Universal Time)

Show code

Min/Max date

Show code

Range

Selected: []

Show code

Multiple

Selected: []

Show code

Trigger

Show code

Programmatically

Show code

Slots

Show code

Events

Show code

Month picker

Show code

Class props ​

'Classes applied to the element'
How does the Class props inspector work?
Class propDescriptionPropsSuffixes
boxClassClass of the Datepicker box where you choose the date.
dropdownClassesClasses to apply on internal dropdown component. More detail here
footerClassClass of the Datepicker footer.
headerButtonsClassClass of the Datepicker buttons inside the box.
headerButtonsSizeClassClass of the Datepicker buttons inside the box when a size is choosen.sizesmall
medium
large
headerClassClass of the Datepicker header inside the box.
inputClassesClasses to apply on internal input component. More detail here
listsClassClass of the month and year selects container inside the Datepicker box.
🔍 Classes applied have a higher specificity than expected when mobileClass is applied
mobileClassClass of the Datepicker when on mobile.
👉 Switch to mobile view to see it in action!
monthBodyClassClass of the table body inside the box when type is month.
monthCellClassClass of the table cell when type is month.
monthCellFirstHoveredClassClass of the first hovered table cell during range selection when type is month.
👉 See it in action selecting a date range
monthCellFirstSelectedClassClass of the first selected table cell when in range when type is month.
👉 See it in action selecting a date range
monthCellLastHoveredClassClass of the last table cell hovered during range selection when type is month.
👉 See it in action selecting a date range
monthCellLastSelectedClassClass of the last selected table cell during range selection when type is month.
👉 See it in action selecting a date range
monthCellSelectableClassClass of the table cell that is selectable when type is month.
monthCellSelectedClassClass of table cell when it's selected when type is month.
monthCellTodayClassClass of the table cell of the current day when type is month.
monthCellUnselectableClassClass of the table cell that is unselectable when type is month.
monthCellWithinHoveredClassClass of the table cell when hovered during range selection when type is month.
👉 See it in action selecting a date range
monthCellWithinHoveredRangeClassClass of the table cell when hovered during range selection and cell is in range when type is month.
👉 See it in action selecting a date range
monthCellWithinSelectedClassClass of the table cells within the range when the range is selected when type is month.
👉 See it in action selecting a date range
monthClassClass of the Datepicker table inside the box when type is month.
monthEventsClassClass of the events container when type is month.
monthTableClassClass of the table container when type is month.
nextButtonClassClass of the next button inside the Datepicker box.
🔍 Classes applied have a higher specificity than expected when mobileClass is applied
prevButtonClassClass of the prev button inside the Datepicker box.
🔍 Classes applied have a higher specificity than expected when mobileClass is applied
rootClassClass of the root element.
selectClassesClasses to apply on internal select component (month and year list). More detail here
sizeClassClass of the Datepicker size.sizesmall
medium
large
tableBodyClassClass of the table body inside the box.
tableCellClassClass of the table cell.
tableCellEventsClassClass of the cell of a row when at least one event is present.
tableCellFirstHoveredClassClass of the first hovered table cell during range selection.
👉 See it in action selecting a date range
tableCellFirstSelectedClassClass of the first selected table cell when in range.
👉 See it in action selecting a date range
tableCellInvisibleClassClass of the table cell when nearby month days are hidden.
tableCellLastHoveredClassClass of the last table cell hovered during range selection.
👉 See it in action selecting a date range
tableCellLastSelectedClassClass of the last selected table cell during range selection.
👉 See it in action selecting a date range
tableCellNearbyClassClass of the table cell when nearby days (prev/next month) are selectable.
tableCellSelectableClassClass of the table cell that is selectable.
tableCellSelectedClassClass of table cell when it's selected.
tableCellTodayClassClass of the table cell of the current day.
tableCellUnselectableClassClass of the table cell that is unselectable.
tableCellWithinHoveredClassClass of the table cell when hovered during range selection.
👉 See it in action selecting a date range
tableCellWithinSelectedClassClass of the table cells within the range when the range is selected.
👉 See it in action selecting a date range
tableClassClass of the Datepicker table inside the box.
tableEventClassClass of the event.
tableEventIndicatorsClassClass of the event indicator.indicatorbars
dots
*
tableEventVariantClassClass of the event indicator when a `variant` is specified.variant in eventprimary
info
warning
danger
tableEventsClassClass of the events container.
tableHeadCellClassClass of the cell inside the table header.
tableHeadClassClass of Datepicker header with days of the week inside the table.
tableRowClassClass of the table row.

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
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 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:modelValuevalue 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-line-heightvar(--#{$prefix}base-line-height)
$datepicker-box-padding0.375rem 1rem
$datepicker-header-padding0 0 0.875rem 0
$datepicker-header-margin0 0 0.875rem 0
$datepicker-header-border-bottom1px solid var(--#{$prefix}grey-lighter)
$datepicker-footer-padding0.875rem 0.5rem 0 0.5rem
$datepicker-footer-margin0.875rem 0 0.875rem 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-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.

Copyright © 2020-2024 Walter Tommasi