OrugaDatepicker
An input with a simple dropdown/modal for selecting a date, uses native datepicker for mobile
Examples
Base
Selected: Thu Sep 21 2023 13:06:38 GMT+0000 (Coordinated Universal Time)
Show code
Min/Max date
Show code
Range
Selected: Thu Sep 21 2023 13:06:38 GMT+0000 (Coordinated Universal Time)
Show code
Multiple
Selected: []
Show code
Trigger
Show code
Programmatically
Show code
Slots
Show code
Events
Show code
Month picker
Show code
Class props
| 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 | |
| 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 | |
| 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 | |
| tableEventVariantClass | Class of the event indicator when a `variant` is specified. | variant in event | primary | |
| 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. |
Datepicker component
html
<o-datepicker></o-datepicker>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: { | |
| disabled | boolean | - | ||
| editable | boolean | - | ||
| events | array | - | ||
| expanded | Makes input full width when inside a grouped or addon field | boolean | - | |
| firstDayOfWeek | number | - | From config: datepicker: { | |
| focusedDate | Date | - | ||
| icon | Icon name to be added | string | - | |
| iconNext | string | - | From config: datepicker: { | |
| iconPack | Icon pack to use | string | mdi, fa, fas and any other custom icon pack | |
| iconPrev | string | - | From config: datepicker: { | |
| iconRight | string | - | ||
| iconRightClickable | boolean | - | ||
| indicators | string | - | 'dots' | |
| inline | boolean | - | ||
| locale | string|array | - | From config: { | |
| 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: { | |
| mobileNative | boolean | - | From config: datepicker: { | |
| modelValue | date|array | - | ||
| monthNames | array | - | From config: datepicker: { | |
| multiple | boolean | - | false | |
| nearbyMonthDays | boolean | - | From config: datepicker: { | |
| nearbySelectableMonthDays | boolean | - | From config: datepicker: { | |
| openOnFocus | boolean | - | ||
| override | boolean | - | ||
| placeholder | string | - | ||
| position | string | - | ||
| range | boolean | - | false | |
| rounded | Makes the element rounded | boolean | - | |
| rulesForFirstWeek | number | - | Default function (see source code) | |
| selectableDates | array|func | - | ||
| showWeekNumber | boolean | - | From config: datepicker: { | |
| size | Size of button, optional | string | small, medium, large | |
| statusIcon | Show status icon using field and variant prop | boolean | - | From config: { |
| trapFocus | boolean | - | From config: datepicker: { | |
| type | string | - | ||
| unselectableDates | array|func | - | ||
| unselectableDaysOfWeek | array | - | From config: datepicker: { | |
| useHtml5Validation | Enable html 5 native validation | boolean | - | From config: { |
| validationMessage | The message which is shown when a validation error occurs | string | - | |
| weekNumberClickable | boolean | - | From config: datepicker: { | |
| yearsRange | array | - | From config: datepicker: { |
Events
| Event name | Properties | Description |
|---|---|---|
| icon-right-click | ||
| range-start | ||
| range-end | ||
| blur | ||
| focus | ||
| invalid | ||
| update:modelValue | ||
| change-month | ||
| change-year | ||
| active-change |
Slots
| Name | Description | Bindings |
|---|---|---|
| trigger | ||
| header | ||
| table | ||
| footer |
Sass variables
Current theme ➜ Oruga Base
| SASS Variable | Default |
|---|---|
| $datepicker-font-size | $base-font-size |
| $datepicker-box-line-height | $base-line-height |
| $datepicker-box-padding | 0.375rem 1rem |
| $datepicker-header-padding | 0 0 0.875rem 0 |
| $datepicker-header-margin | 0 0 0.875rem 0 |
| $datepicker-header-border-bottom | 1px solid $grey-lighter |
| $datepicker-footer-padding | 0.875rem 0.5rem 0 0.5rem |
| $datepicker-footer-margin | 0.875rem 0 0.875rem 0 |
| $datepicker-footer-border-top | 1px solid $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 $grey-lighter |
| $datepicker-table-head-item-color | $grey |
| $datepicker-table-head-item-font-weight | 600 |
| $datepicker-item-today-border | solid 1px rgba($primary, 0.5) |
| $datepicker-item-selectable-color | $grey-dark |
| $datepicker-item-disabled-color | $grey-light |
| $datepicker-item-border-radius | $base-border-radius |
| $datepicker-item-padding | 0.5rem 0.75rem |
| $datepicker-item-selected-color | $primary-invert |
| $datepicker-item-selected-background-color | $primary |
| $datepicker-item-selected-border-radius | 0 |
| $datepicker-item-selected-within-background-color | rgba( $datepicker-item-selected-background-color, 0.5) |
| $datepicker-item-hovered-background-color | $grey |
| $datepicker-item-hovered-color | $grey-lighter |
| $datepicker-item-hovered-background-color | #f5f5f5 |
| $datepicker-item-hovered-within-background-color | rgba( $datepicker-item-hovered-background-color, 0.5) |
| $datepicker-item-nearby-color | $grey-light |
| $datepicker-events-item-padding | 0.3rem 0.75rem 0.75rem |
| $datepicker-event-background-color | $grey-light |
| $datepicker-event-dots-size | 0.35em |
| $datepicker-event-dots-margin | 0 0.1em |
| $datepicker-event-bars-height | 0.25em |
| $datepicker-btn-border-color | $grey-lighter |
| $datepicker-btn-border-radius | $base-border-radius |
| $datepicker-btn-border | 1px solid transparent |
| $datepicker-btn-color | #363636 |
| $datepicker-btn-height | 2.25em |
| $datepicker-btn-hover-border-color | $grey-light |
| $datepicker-btn-hover-color | #363636 |
| $datepicker-btn-line-height | $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 ➜ Oruga Full
| SASS Variable | Default |
|---|---|
| $datepicker-font-size | $base-font-size |
| $datepicker-box-line-height | $base-line-height |
| $datepicker-box-padding | 0.375rem 1rem |
| $datepicker-header-padding | 0 0 0.875rem 0 |
| $datepicker-header-margin | 0 0 0.875rem 0 |
| $datepicker-header-border-bottom | 1px solid $grey-lighter |
| $datepicker-footer-padding | 0.875rem 0.5rem 0 0.5rem |
| $datepicker-footer-margin | 0.875rem 0 0.875rem 0 |
| $datepicker-footer-border-top | 1px solid $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 $grey-lighter |
| $datepicker-table-head-item-color | $grey |
| $datepicker-table-head-item-font-weight | 600 |
| $datepicker-item-today-border | solid 1px rgba($primary, 0.5) |
| $datepicker-item-selectable-color | $grey-dark |
| $datepicker-item-disabled-color | $grey-light |
| $datepicker-item-border-radius | $base-border-radius |
| $datepicker-item-padding | 0.5rem 0.75rem |
| $datepicker-item-selected-color | $primary-invert |
| $datepicker-item-selected-background-color | $primary |
| $datepicker-item-selected-border-radius | 0 |
| $datepicker-item-selected-within-background-color | rgba( $datepicker-item-selected-background-color, 0.5) |
| $datepicker-item-hovered-background-color | $grey |
| $datepicker-item-hovered-color | $grey-lighter |
| $datepicker-item-hovered-background-color | #f5f5f5 |
| $datepicker-item-hovered-within-background-color | rgba( $datepicker-item-hovered-background-color, 0.5) |
| $datepicker-item-nearby-color | $grey-light |
| $datepicker-events-item-padding | 0.3rem 0.75rem 0.75rem |
| $datepicker-event-background-color | $grey-light |
| $datepicker-event-dots-size | 0.35em |
| $datepicker-event-dots-margin | 0 0.1em |
| $datepicker-event-bars-height | 0.25em |
| $datepicker-btn-border-color | $grey-lighter |
| $datepicker-btn-border-radius | $base-border-radius |
| $datepicker-btn-border | 1px solid transparent |
| $datepicker-btn-color | #363636 |
| $datepicker-btn-height | 2.25em |
| $datepicker-btn-hover-border-color | $grey-light |
| $datepicker-btn-hover-color | #363636 |
| $datepicker-btn-line-height | $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
The theme does not have any custom variables for this component.
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-width | calc(#{100%} / 7) |
| $datepicker-cell-border-radius | var(--#{$prefix}border-radius) |
| $datepicker-cell-font-weight | 400 |
| $datepicker-cell-color | var(--#{$prefix}black) |
| $datepicker-cell-hovered-color | var(--#{$prefix}secondary) |
| $datepicker-cell-selected-color | 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-max-width | 460px |
See ➜ 📄 Full scss file