Datepicker

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

---

edit on github

Examples

<template>
  <section>
    <o-field grouped group-multiline>
      <o-field>
        <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>
        <o-switch v-model="showWeekNumber">Show week number</o-switch>
      </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-datepicker>
    </o-field>
  </section>
</template>

<script>
  export default {
    data() {
      return {
        selected: new Date(),
        showWeekNumber: false,
        locale: undefined // Browser locale
      }
    }
  }
</script>

Min/Max date

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

<script>
  export default {
    data() {
      const today = new Date()

      return {
        date: new Date(),
        minDate: new Date(today.getFullYear(), today.getMonth(), today.getDate() - 7),
        maxDate: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7)
      }
    }
  }
</script>

Range

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

<script>
  export default {
    data() {
      return {
        dates: []
      }
    }
  }
</script>

Multiple

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

<script>
  export default {
    data() {
      return {
        dates: []
      }
    }
  }
</script>

Trigger

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

<script>
  export default {
    data() {
      return {
        selected: null
      }
    },
    computed: {
      selectedString() {
        return this.selected ? this.selected.toDateString() : ''
      }
    }
  }
</script>

Programmatically

<template>
  <section>
    <o-field>
      <o-datepicker ref="datepicker" expanded placeholder="Select a date"> </o-datepicker>
      <o-button @click="$refs.datepicker.toggle()" icon-left="calendar" type="primary" />
    </o-field>
  </section>
</template>

<script>
  export default {}
</script>

Footer slot

<template>
  <o-field label="Select a date">
    <o-datepicker v-model="date" :first-day-of-week="1" placeholder="Click to select...">
      <o-button variant="primary" @click="date = new Date()">
        <o-icon icon="calendar"></o-icon>
        <span>Today</span>
      </o-button>

      <o-button variant="danger" @click="date = null">
        <o-icon icon="times"></o-icon>
        <span>Clear</span>
      </o-button>
    </o-datepicker>
  </o-field>
</template>

<script>
  export default {
    data() {
      return {
        date: new Date()
      }
    }
  }
</script>

Header slot

<template>
  <o-field label="Select a date">
    <o-datepicker :focused-date="date" :first-day-of-week="1" placeholder="Click to select...">
      <template slot="header">
        <o-field>
          <o-autocomplete open-on-focus readonly v-model="month" :data="months" field="name" @select="selectMonth"> </o-autocomplete>
          <o-button disabled>{{ date.getFullYear() }}</o-button>
        </o-field>
      </template>
    </o-datepicker>
  </o-field>
</template>

<script>
  export default {
    data() {
      return {
        date: new Date(),
        month: null,
        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 }
        ]
      }
    },
    methods: {
      selectMonth(option) {
        if (option) {
          this.date = new Date(this.date)
          this.date.setMonth(option.value)
        }
      }
    },
    mounted() {
      this.month = this.months.filter(item => item.value == this.date.getMonth())[0].name
    }
  }
</script>

Events

<template>
  <span>
    <o-field>
      <o-switch v-model="bars">Bars</o-switch>
    </o-field>
    <o-datepicker inline v-model="date" :events="events" :indicators="indicators"> </o-datepicker>
  </span>
</template>

<script>
  const thisMonth = new Date().getMonth()

  export default {
    computed: {
      indicators() {
        return this.bars ? 'bars' : 'dots'
      }
    },
    data() {
      return {
        date: new Date(2017, thisMonth, 1),
        events: [
          new Date(2017, thisMonth, 2),
          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'
          },
          new Date(2017, thisMonth, 12),
          {
            date: new Date(2017, thisMonth, 12),
            type: 'warning'
          },
          {
            date: new Date(2017, thisMonth, 16),
            type: 'danger'
          },
          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'
          }
        ],
        bars: false
      }
    }
  }
</script>

Month picker

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

<script>
  export default {
    data() {
      return {
        dates: undefined
      }
    }
  }
</script>

Class props

📄 Full scss file

Select a date

January February March April May June July August September October November December

2033 2032 2031 2030 2029 2028 2027 2026 2025 2024 2023 2022 2021 2020 2019 2018 2017 2016 2015 2014 2013 2012 2011 2010 2009 2008 2007 2006 2005 2004 2003 2002 2001 2000 1999 1998 1997 1996 1995 1994 1993 1992 1991 1990 1989 1988 1987 1986 1985 1984 1983 1982 1981 1980 1979 1978 1977 1976 1975 1974 1973 1972 1971 1970 1969 1968 1967 1966 1965 1964 1963 1962 1961 1960 1959 1958 1957 1956 1955 1954 1953 1952 1951 1950 1949 1948 1947 1946 1945 1944 1943 1942 1941 1940 1939 1938 1937 1936 1935 1934 1933 1932 1931 1930 1929 1928 1927 1926 1925 1924 1923

S

M

T

W

T

F

S

27

28

29

30

31

12

3456789

10111213141516

1718192021

2223

24252627282930

1

2

3

4

5

6

7

How does Class props inspector work?

Class props inspector is useful to see class props you want to use to customize Oruga components and how they change a component. You can click on Inspect button to find the exact element where a specific class prop acts.

In the Class props inspector there are other columns

Class prop

This column contains the name of the Class prop you want to inspect.
If you find a name with a link (▷ classPropName) this refers to a subitem (e.g. Dropdown Item in Dropdown).

Description

This column contains the description of the Class prop you want to inspect.
👉 This icon indicates some warning, e.g. this Class prop is visible only on mobile.
🔍 This icon indicates that you should pay attention to CSS specificity. See "Deal with specificity" section in the documentation.

Props

This column contains a list of props that activate the class, e.g. if a class prop contains disabled prop it means that only when the component has disabled prop.

Suffixes

This column contains all the possible suffixes that you'll receive if you use a function to customize your Class prop. You'll find more info in the "Overriding section".

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!
monthBodyClass	Class of the table body inside the box when type is month.
monthCellClass	Class of the table cell when type is month.
monthCellFirstHoveredClass	Class of the first hovered table cell during range selection when type is month. 👉 See it in action selecting a date range
monthCellFirstSelectedClass	Class of the first selected table cell when in range when type is month. 👉 See it in action selecting a date range
monthCellInvisibleClass	Class of the table cell when nearby month days are hidden when type is month.
monthCellLastHoveredClass	Class of the last table cell hovered during range selection when type is month. 👉 See it in action selecting a date range
monthCellLastSelectedClass	Class of the last selected table cell during range selection when type is month. 👉 See it in action selecting a date range
monthCellNearbyClass	Class of the table cell when nearby days (prev/next month) are selectable when type is month.
monthCellSelectableClass	Class of the table cell that is selectable when type is month.
monthCellSelectedClass	Class of table cell when it's selected when type is month.
monthCellTodayClass	Class of the table cell of the current day when type is month.
monthCellUnselectableClass	Class of the table cell that is unselectable when type is month.
monthCellWithinHoveredClass	Class of the table cell when hovered during range selection when type is month. 👉 See it in action selecting a date range
monthCellWithinSelectedClass	Class of the table cells within the range when the range is selected when type is month. 👉 See it in action selecting a date range
monthClass	Class of the Datepicker table inside the box when type is month.
monthEventsClass	Class of the events container when type is month.
monthRowClass	Class of the table row when type is month.
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.
selectListClasses	Classes to apply on select list (month and year). More detail here
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	Icon name to be added on the right side	string	-
iconRightClickable	Make the icon right clickable	boolean	-
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|func	-
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|func	-
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, 10] }

Events

Event name	Properties	Description
icon-right-click
range-start
range-end
blur
focus
invalid
input
change-month
change-year
active-change

Slots

Name	Description	Bindings
trigger
header
table
footer

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