# Datepicker

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


edit on github

# Examples

# Min/Max date

# Range

# Multiple

# Trigger

# Programmatically

# Header slot

# Events

# Class props

📄 Full scss file


How does Class props inspector work?
Class prop Description Props Suffixes
boxClass Class of the Datepicker box where you choose the date.
dropdownClasses Classes to apply on dropdown. More detail here
footerClass Class of the Datepicker footer.
headerButtonsClass Class of the Datepicker buttons inside the box.
headerButtonsSizeClass Class of the Datepicker buttons inside the box when a size is choosen. size small
medium
large
headerClass Class of the Datepicker header inside the box.
inputClasses Classes to apply on internal input. More detail here
listsClass Class of the month and year selects container inside the Datepicker box.
🔍 Classes applied have a higher specificity than expected when mobileClass is applied
mobileClass Class of the Datepicker when on mobile.
👉 Switch to mobile view to see it in action!
nextBtnClass Class of the next button inside the Datepicker box.
🔍 Classes applied have a higher specificity than expected when mobileClass is applied
prevBtnClass Class of the prev. button inside the Datepicker box.
🔍 Classes applied have a higher specificity than expected when mobileClass is applied
rootClass Class of the root element.
sizeClass Class of the Datepicker size. size small
medium
large
tableBodyClass Class of the table body inside the box.
tableCellClass Class of the table cell.
tableCellEventsClass Class of the cell of a row when at least one event is present.
tableCellFirstHoveredClass Class of the first hovered table cell during range selection.
👉 See it in action selecting a date range
tableCellFirstSelectedClass Class of the first selected table cell when in range.
👉 See it in action selecting a date range
tableCellInvisibleClass Class of the table cell when nearby month days are hidden.
tableCellLastHoveredClass Class of the last table cell hovered during range selection.
👉 See it in action selecting a date range
tableCellLastSelectedClass Class of the last selected table cell during range selection.
👉 See it in action selecting a date range
tableCellNearbyClass Class of the table cell when nearby days (prev/next month) are selectable.
tableCellSelectableClass Class of the table cell that is selectable.
tableCellSelectedClass Class of table cell when it's selected.
tableCellTodayClass Class of the table cell of the current day.
tableCellUnselectableClass Class of the table cell that is unselectable.
tableCellWithinHoveredClass Class of the table cell when hovered during range selection.
👉 See it in action selecting a date range
tableCellWithinSelectedClass Class of the table cells within the range when the range is selected.
👉 See it in action selecting a date range
tableClass Class of the Datepicker table inside the box.
tableEventClass Class of the event.
tableEventIndicatorsClass Class of the event indicator. indicator bars
dots
*
tableEventVariantClass Class of the event indicator when a `variant` is specified. variant in event primary
info
warning
danger
tableEventsClass Class of the events container.
tableHeadCellClass Class of the cell inside the table header.
tableHeadClass Class of Datepicker header with days of the week inside the table.
tableRowClass Class of the table row.


# Props

Prop name Description Type Values Default
appendToBody boolean -
ariaNextLabel string -
ariaPreviousLabel string -
autocomplete Native options to use in HTML5 validation string -
closeOnClick boolean - true
dateCreator func - Default function (see source code)
dateFormatter func - Default function (see source code)
dateParser func - Default function (see source code)
dayNames array -
From config

datepicker: {
  dayNames: undefined
}
disabled boolean -
editable boolean -
events array -
expanded Makes input full width when inside a grouped or addon field boolean -
firstDayOfWeek First day of week to display in table header (getDay() of Date Object) number 0, 1, 2, 3, 4, 5, 6
From config

datepicker: {
  firstDayOfWeek: 0
}
focusedDate date -
icon Icon name to be added string -
iconNext string -
From config

datepicker: {
  iconNext: 'chevron-right'
}
iconPack Icon pack to use string mdi, fa, fas and any other custom icon pack
iconPrev string -
From config

datepicker: {
  iconPrev: 'chevron-left'
}
iconRight string -
indicators string - 'dots'
inline boolean -
locale string|array -
From config

{
   locale: undefined
}
maxDate date -
maxlength Same as native maxlength, plus character counter number|string -
minDate date -
mobileBreakpoint Mobile breakpoint as max-width value string -
mobileModal boolean -
From config

datepicker: {
  mobileModal: true
}
mobileNative boolean -
From config

datepicker: {
  mobileNative: true
}
monthNames array -
From config

datepicker: {
  monthNames: undefined
}
multiple boolean - false
nearbyMonthDays boolean -
From config

datepicker: {
  nearbyMonthDays: true
}
nearbySelectableMonthDays boolean -
From config

datepicker: {
  nearbySelectableMonthDays: false
}
openOnFocus boolean -
override Override classes boolean - false
placeholder string -
position Optional, position of the datepicker relative to the input string top-right, top-left, bottom-left
range boolean - false
rounded Makes the element rounded boolean -
rulesForFirstWeek number - Default function (see source code)
selectableDates array -
showWeekNumber boolean -
From config

datepicker: {
  showWeekNumber: false
}
size Size of button, optional string small, medium, large
statusIcon Show status icon using field and variant prop boolean -
From config

{
   "statusIcon": true
}
trapFocus boolean -
From config

datepicker: {
  trapFocus: true
}
type string -
unselectableDates array -
unselectableDaysOfWeek array -
From config

datepicker: {
  unselectableDaysOfWeek: undefined
}
useHtml5Validation Enable html 5 native validation boolean -
From config

{
   "useHtml5Validation": true
}
v-model date|array -
validationMessage The message which is shown when a validation error occurs string -
weekNumberClickable boolean -
From config

datepicker: {
  weekNumberClickable: false
}
yearsRange array -
From config

datepicker: {
  yearsRange: [-100
}

# Events

Event name Properties Description
range-start
range-end
blur
focus
input
change-month
change-year

# Slots

Name Description Bindings
trigger
header
default

# Style

CSS Variable SASS Variable Default
--oruga-datepicker-font-size $datepicker-font-size $base-font-size
--oruga-datepicker-box-line-height $datepicker-box-line-height $base-line-height
--oruga-datepicker-box-padding $datepicker-box-padding .375rem 1rem
--oruga-datepicker-header-padding $datepicker-header-padding 0 0 0.875rem 0
--oruga-datepicker-header-margin $datepicker-header-margin 0 0 0.875rem 0
--oruga-datepicker-header-border-bottom $datepicker-header-border-bottom 1px solid $grey-lighter
--oruga-datepicker-footer-padding $datepicker-footer-padding 0.875rem .5rem 0 .5rem
--oruga-datepicker-footer-margin $datepicker-footer-margin 0.875rem 0 0.875rem 0
--oruga-datepicker-footer-border-top $datepicker-footer-border-top 1px solid $grey-lighter
--oruga-datepicker-table-head-padding $datepicker-table-head-padding 0 0 0.875rem 0
--oruga-datepicker-table-head-margin $datepicker-table-head-margin 0 0 0.875rem 0
--oruga-datepicker-table-head-border-bottom $datepicker-table-head-border-bottom 1px solid $grey-lighter
--oruga-datepicker-table-head-item-color $datepicker-table-head-item-color $grey
--oruga-datepicker-table-head-item-font-weight $datepicker-table-head-item-font-weight 600
--oruga-datepicker-item-today-border $datepicker-item-today-border solid 1px rgba($primary, 0.5)
--oruga-datepicker-item-selectable-color $datepicker-item-selectable-color $grey-dark
--oruga-datepicker-item-disabled-color $datepicker-item-disabled-color $grey-light
--oruga-datepicker-item-border-radius $datepicker-item-border-radius $base-border-radius
--oruga-datepicker-item-padding $datepicker-item-padding 0.5rem 0.75rem
--oruga-datepicker-item-selected-color $datepicker-item-selected-color $primary-invert
--oruga-datepicker-item-selected-background-color $datepicker-item-selected-background-color $primary
--oruga-datepicker-item-selected-border-radius $datepicker-item-selected-border-radius 0
--oruga-datepicker-item-selected-within-background-color $datepicker-item-selected-within-background-color rgba($datepicker-item-selected-background-color, 0.5)
--oruga-datepicker-item-hovered-background-color $datepicker-item-hovered-background-color $grey
--oruga-datepicker-item-hovered-color $datepicker-item-hovered-color $grey-lighter
--oruga-datepicker-item-hovered-background-color $datepicker-item-hovered-background-color #f5f5f5
--oruga-datepicker-item-hovered-within-background-color $datepicker-item-hovered-within-background-color rgba($datepicker-item-hovered-background-color, 0.5)
--oruga-datepicker-item-nearby-color $datepicker-item-nearby-color $grey-light
--oruga-datepicker-events-item-padding $datepicker-events-item-padding .3rem .75rem .75rem
--oruga-datepicker-event-background-color $datepicker-event-background-color $grey-light
--oruga-datepicker-event-dots-size $datepicker-event-dots-size .35em
--oruga-datepicker-event-dots-margin $datepicker-event-dots-margin 0 .1em
--oruga-datepicker-event-bars-height $datepicker-event-bars-height .25em
--oruga-datepicker-btn-border-color $datepicker-btn-border-color $grey-lighter
--oruga-datepicker-btn-border-radius $datepicker-btn-border-radius $base-border-radius
--oruga-datepicker-btn-border $datepicker-btn-border 1px solid transparent
--oruga-datepicker-btn-color $datepicker-btn-color #363636
--oruga-datepicker-btn-height $datepicker-btn-height 2.25em
--oruga-datepicker-btn-hover-border-color $datepicker-btn-hover-border-color $grey-light
--oruga-datepicker-btn-hover-color $datepicker-btn-hover-color #363636
--oruga-datepicker-btn-line-height $datepicker-btn-line-height $base-line-height
--oruga-datepicker-btn-margin $datepicker-btn-margin .25rem
--oruga-datepicker-btn-min-width $datepicker-btn-min-width 2.25em
--oruga-datepicker-btn-padding $datepicker-btn-padding .5em .5em