Datepicker
Bootstrap 5 Datepicker
Date picker is a plugin that adds the function of selecting time without the necessity of using custom JavaScript code.
Note: Read the API tab to find all available options and advanced customization
*
*
UMD autoinits are enabled
by default. This means that you don't need to initialize
the component manually. However if you are using MDBootstrap ES format then you should pass
the required components to the initMDB
method.
Basic example
The datepicker allows users to enter a date either through text input, or by choosing a date from the calendar. Date pickers can be embedded into dialogs on mobile and text field dropdowns on desktop.
<div class="form-outline" data-mdb-datepicker-init data-mdb-input-init>
<input type="text" class="form-control" id="exampleDatepicker11" />
<label for="exampleDatepicker11" class="form-label">Select a date</label>
</div>
// Initialization for ES Users
import { Datepicker, Input, initMDB } from "mdb-ui-kit";
initMDB({ Datepicker, Input });
Inline version
Use the data-mdb-inline="true"
attribute to use a inline version of datepicker.
<div class="form-outline" data-mdb-datepicker-init data-mdb-input-init data-mdb-inline="true">
<input type="text" class="form-control" id="exampleDatepicker2" />
<label for="exampleDatepicker2" class="form-label">Select a date</label>
</div>
// Initialization for ES Users
import { Datepicker, Input, initMDB } from "mdb-ui-kit";
initMDB({ Datepicker, Input });
Translations
The picker can be customized to add support for internationalization. Modify the component options to add translations.
<div class="form-outline datepicker-translated" data-mdb-input-init>
<input type="text" class="form-control" id="exampleDatepicker3" />
<label for="exampleDatepicker3" class="form-label">Select a date</label>
</div>
import { Datepicker, Input, initMDB } from "mdb-ui-kit";
initMDB({ Input });
const datepickerTranslated = document.querySelector('.datepicker-translated');
new Datepicker(datepickerTranslated, {
title: 'Datum auswählen',
monthsFull: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
monthsShort: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov','Dez'],
weekdaysFull: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
weekdaysShort: ['Son', 'Mon', 'Die', 'Mit', 'Don', 'Fre', 'Sam'],
weekdaysNarrow: ['S', 'M', 'D', 'M', 'D', 'F', 'S'],
okBtnText: 'Ok',
clearBtnText: 'Klar',
cancelBtnText: 'Schließen',
});
const datepickerTranslated = document.querySelector('.datepicker-translated');
new mdb.Datepicker(datepickerTranslated, {
title: 'Datum auswählen',
monthsFull: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
monthsShort: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov','Dez'],
weekdaysFull: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
weekdaysShort: ['Son', 'Mon', 'Die', 'Mit', 'Don', 'Fre', 'Sam'],
weekdaysNarrow: ['S', 'M', 'D', 'M', 'D', 'F', 'S'],
okBtnText: 'Ok',
clearBtnText: 'Klar',
cancelBtnText: 'Schließen',
});
Formats
Use format
option to display date in a human-friendly format.
<div class="form-outline" data-mdb-datepicker-init data-mdb-input-init data-mdb-format="dd, mmm, yyyy">
<input type="text" class="form-control" id="exampleDatepicker4" placeholder="dd, mmm, yyyy" />
<label for="exampleDatepicker4" class="form-label">Select a date</label>
</div>
// Initialization for ES Users
import { Datepicker, Input, initMDB } from "mdb-ui-kit";
initMDB({ Datepicker, Input });
Formatting rules
The following rules can be used to format any date:
Note: When using ddd
and dddd
formats, you need to also provide
d
or dd
. For example: data-mdb-format="ddd, dd, mmm, yyyy"
Rule | Description | Result |
---|---|---|
d |
Date of the month | 1 – 31 |
dd |
Date of the month with a leading zero | 01 – 31 |
ddd |
Day of the week in short form | Sun – Sat |
dddd |
Day of the week in full form | Sunday – Saturday |
m |
Month of the year | 1 – 12 |
mm |
Month of the year with a leading zero | 01 – 12 |
mmm |
Month name in short form | Jan – Dec |
mmmm |
Month name in full form | January – December |
yy |
Year in short form * | 00 – 99 |
yyyy |
Year in full form | 2000 – 2999 |
Date limits
Set the minimum and maximum selectable dates with the min
and
max
options.
<div class="form-outline datepicker-with-limits" data-mdb-input-init>
<input type="text" class="form-control" id="exampleDatepicker5" />
<label for="exampleDatepicker5" class="form-label">Select a date</label>
</div>
import { Datepicker, Input, initMDB } from "mdb-ui-kit";
initMDB({ Input });
const datepickerWithLimits = document.querySelector('.datepicker-with-limits');
new Datepicker(datepickerWithLimits, {
min: new Date(2020, 5, 10),
max: new Date(2022, 5, 20)
});
const datepickerWithLimits = document.querySelector('.datepicker-with-limits');
new mdb.Datepicker(datepickerWithLimits, {
min: new Date(2020, 5, 10),
max: new Date(2022, 5, 20)
});
Disable past
Utilize the disablePast
option to prevent the selection of dates that have already occurred.
<div class="form-outline datepicker-disable-past" data-mdb-input-init>
<input type="text" class="form-control" id="exampleDatepicker6" />
<label for="exampleDatepicker6" class="form-label">Select a date</label>
</div>
import { Datepicker, Input, initMDB } from "mdb-ui-kit";
initMDB({ Input });
const datepickerDisablePast = document.querySelector('.datepicker-disable-past');
new Datepicker(datepickerDisablePast, {
disablePast: true
});
const datepickerDisablePast = document.querySelector('.datepicker-disable-past');
new mdb.Datepicker(datepickerDisablePast, {
disablePast: true
});
Disable future
Utilize the disableFuture
option to prevent the selection of future dates.
<div class="form-outline datepicker-disable-future" data-mdb-input-init>
<input type="text" class="form-control" id="exampleDatepicker7" />
<label for="exampleDatepicker7" class="form-label">Select a date</label>
</div>
import { Datepicker, Input, initMDB } from "mdb-ui-kit";
initMDB({ Input });
const datepickerDisableFuture = document.querySelector('.datepicker-disable-future');
new Datepicker(datepickerDisableFuture, {
disableFuture: true
});
const datepickerDisableFuture = document.querySelector('.datepicker-disable-future');
new mdb.Datepicker(datepickerDisableFuture, {
disableFuture: true
});
Disabled dates
The filter
option accept function in which you can specify conditions for date
filtering. A result of true indicates that the date should be valid and a result of false
indicates that it should be disabled. In the following example all saturdays and sundays will
be disabled.
<div class="form-outline datepicker-with-filter" data-mdb-input-init>
<input type="text" class="form-control" id="exampleDatepicker8" />
<label for="exampleDatepicker8" class="form-label">Select a date</label>
</div>
import { Datepicker, Input, initMDB } from "mdb-ui-kit";
initMDB({ Input });
const datepickerWithFilter = document.querySelector('.datepicker-with-filter');
const filterFunction = (date) => {
const isSaturday = date.getDay() === 6;
const isSunday = date.getDay() === 0;
return !isSaturday && !isSunday;
}
new Datepicker(datepickerWithFilter, { filter: filterFunction });
const datepickerWithFilter = document.querySelector('.datepicker-with-filter');
const filterFunction = (date) => {
const isSaturday = date.getDay() === 6;
const isSunday = date.getDay() === 0;
return !isSaturday && !isSunday;
}
new mdb.Datepicker(datepickerWithFilter, { filter: filterFunction });
Input toggle
Add data-mdb-toggle="datepicker"
to the input element to enable toggling on input
click. It is also possible to set toggleButton
option to false
to
remove the toggle button.
<div class="form-outline" data-mdb-datepicker-init data-mdb-input-init data-mdb-toggle-button="false">
<input type="text" class="form-control" id="exampleDatepicker13" data-mdb-toggle="datepicker" />
<label for="exampleDatepicker13" class="form-label">Select a date</label>
</div>
// Initialization for ES Users
import { Datepicker, Input, initMDB } from "mdb-ui-kit";
initMDB({ Datepicker, Input });
Custom toggle icon
You can customize the toggle icon by adding a toggle button template to the component HTML.
<div class="form-outline" data-mdb-datepicker-init data-mdb-input-init data-mdb-toggle-button="false">
<input type="text" class="form-control" id="exampleDatepicker15" />
<label for="exampleDatepicker15" class="form-label">Select a date</label>
<button class="datepicker-toggle-button" data-mdb-toggle="datepicker">
<i class="fas fa-calendar datepicker-toggle-icon"></i>
</button>
</div>
// Initialization for ES Users
import { Datepicker, Input, initMDB } from "mdb-ui-kit";
initMDB({ Datepicker, Input });
Close without confirmation
This option close datepicker when the date is selected.
<div class="form-outline confirm-date-on-select" data-mdb-input-init>
<input type="text" class="form-control" id="exampleDatepicker11" />
<label for="exampleDatepicker11" class="form-label">Example label</label>
</div>
import { Datepicker, Input, initMDB } from "mdb-ui-kit";
initMDB({ Input });
const confirmDateOnSelect = document.querySelector('.confirm-date-on-select');
new Datepicker(confirmDateOnSelect, {
confirmDateOnSelect: true,
});
const confirmDateOnSelect = document.querySelector('.confirm-date-on-select');
new mdb.Datepicker(confirmDateOnSelect, {
confirmDateOnSelect: true,
});
Custom header content
You can customize the content of the header by using the
headerContent
option. Simply pass a string with the template you
want to use. You can use the following variables:
[day]
- to show the selected day[weekday]
- to show the selected weekday name (short)[weekdayFull]
- to show the selected weekday name (long)[month]
- to show the selected month-
[selected]
-Date
full Date object. Using withoutheaderTemplateModifier
option will display the full Date information
headerTemplateModifier
option allows you to modify the
selected
variable. You can use it to display only the information
you need.
<div class="form-outline custom-header-content" data-mdb-input-init>
<input type="text" class="form-control" id="exampleDatepicker12" />
<label for="exampleDatepicker10" class="form-label">Example label</label>
</div>
import { Datepicker, Input, initMDB } from "mdb-ui-kit";
initMDB({ Input });
const datepickerCustomHeader = document.querySelector('.custom-header-content');
new Datepicker(datepickerCustomHeader, {
headerTemplateModifier: (selected) =>
selected.getFullYear() + ' - ' + (selected.getMonth() + 1) + ' - ' + selected.getDate(),
headerTemplate: `
<div class="text-white p-2">
<p class="mb-2">[day] --- [month] --- [weekdayFull] ( [weekday] ) </p>
<p class="mb-2">Full date: [selected] </p>
</div>
`,
});
const datepickerCustomHeader = document.querySelector('.custom-header-content');
new mdb.Datepicker(datepickerCustomHeader, {
headerTemplateModifier: (selected) =>
selected.getFullYear() + ' - ' + (selected.getMonth() + 1) + ' - ' + selected.getDate(),
headerTemplate: `
<div class="text-white p-2">
<p class="mb-2">[day] --- [month] --- [weekdayFull] ( [weekday] ) </p>
<p class="mb-2">Full date: [selected] </p>
</div>
`,
});
Accessibility
We added proper aria attributes to the datepicker controls to make the component accessible. It's possible to change the values of those attributes by modifying the component options:
okBtnLabel: 'Confirm selection',
clearBtnLabel: 'Clear selection',
cancelBtnLabel: 'Cancel selection',
nextMonthLabel: 'Next month',
prevMonthLabel: 'Previous month',
nextYearLabel: 'Next year',
prevYearLabel: 'Previous year',
nextMultiYearLabel: 'Next 24 years',
prevMultiYearLabel: 'Previous 24 years',
switchToMultiYearViewLabel: 'Switch to year list',
switchToDayViewLabel: 'Switch to day list',
Datepicker - API
Import
Importing components depends on how your application works. If you intend to use the MDBootstrap ES
format, you must
first import the component and then initialize it with the initMDB
method. If you are going to use the UMD
format,
just import the mdb-ui-kit
package.
import { Datepicker, initMDB } from "mdb-ui-kit";
initMDB({ Datepicker });
import "mdb-ui-kit"
Usage
Via data attributes
Using the Datepicker component doesn't require any additional JavaScript code - simply add
data-mdb-datepicker-init
attribute to
.form-outline
and use other data attributes to set all options.
For ES
format, you must first import and call the initMDB
method.
<div class="form-outline" data-mdb-datepicker-init data-mdb-input-init>
<input type="text" class="form-control" id="exampleDatepicker1" />
<label for="exampleDatepicker1" class="form-label">Select a date</label>
</div>
Via JavaScript
const options = {
format: 'dd-mm-yyyy'
}
const myDatepicker = new Datepicker(document.getElementById('myDatepicker'), options);
const options = {
format: 'dd-mm-yyyy'
}
const myDatepicker = new mdb.Datepicker(document.getElementById('myDatepicker'), options);
Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to
data-mdb-
, as in data-mdb-ok-btn-text="Ok"
.
Name | Type | Default | Description |
---|---|---|---|
cancelBtnLabel
|
String | 'Cancel selection' |
Changes cancel button aria label |
cancelBtnText
|
String | 'Cancel' |
Changes cancel button text |
clearBtnLabel
|
String | 'Clear selection' |
Changes clear button aria label |
clearBtnText
|
String | 'Clear' |
Changes clear button text |
confirmDateOnSelect
|
Boolean | false |
Closes datepicker modal when the date is selected |
container |
String | 'body' |
Allows to set the parent element for the datepicker. |
disablePast |
Boolean | false |
Disables selection of past dates |
disableFuture |
Boolean | false |
Disables selection of future dates |
filter |
Function | null | null |
Disables dates that meet the specified condition |
format |
String | null | 'dd/mm/yyyy' |
Changes date format displayed in input |
headerTemplate
|
String | null |
Allows to create a custom header template. You can add
[day], [month], [weekdayFull], [weekday] and
[selected] variables to show proper values in your custom
header
|
headerTemplateModifier
|
Function | null | null |
Allows to format the Date object in [selected] variable in
custom header. Will work only together with headerTemplate
|
inline |
Boolean | false |
Changes datepicker display mode to inline (dropdown) |
max |
String | Date | null | null |
Changes max available date |
min |
String | Date | null | null |
Changes min available date |
monthsFull
|
Array |
[ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August',
'September', 'October', 'November', 'December', ]
|
Changes array of months full names |
monthsShort
|
Array |
['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov',
'Dec']
|
Changes array of months short names |
okBtnLabel
|
String | 'Confirm selection' |
Changes ok button aria label |
nextMonthLabel
|
String | 'Next month' |
Changes next button aria label in days view |
nextMultiYearLabel
|
String | 'Next 24 years' |
Changes next button aria label in years view |
nextYearLabel
|
String | 'Next year' |
Changes next button aria label in months view |
okBtnText
|
String | 'Ok' |
Changes ok button text |
prevMonthLabel
|
String | 'Previous month' |
Changes previous button aria label in days view |
prevMultiYearLabel
|
String | 'Previous 24 years' |
Changes previous button aria label in years view |
prevYearLabel
|
String | 'Previous year' |
Changes previous button aria label in months view |
removeCancelBtn
|
Boolean | false |
Removes Cancel button from datepicker modal |
removeClearBtn
|
Boolean | false |
Removes Clear button from datepicker modal |
removeOkBtn
|
Boolean | false |
Removes Ok button from datepicker modal |
switchToDayViewLabel
|
String | 'Switch to day list' |
Changes view change button aria label in years view |
switchToMultiYearViewLabel
|
String | 'Switch to year list' |
Changes view change button aria label in days view |
startDate
|
String | Date | null | null |
Changes default date to which datepicker will navigate |
startDay
|
Number | 0 |
Changes default start day (0 for Sunday, 1 for Monday...) |
title |
String | 'Select date' |
Changes datepicker title |
weekdaysFull
|
Array |
['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday',
'Saturday']
|
Changes array of weekdays full names |
weekdaysNarrow
|
Array | ['S', 'M', 'T', 'W', 'T', 'F', 'S'] |
Changes array of weekdays narrow names |
weekdaysShort
|
Array | ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] |
Changes array of weekdays short names |
view |
String | 'days' |
Changes default datepicker view (days/years/months) |
Methods
Name | Description | Example |
---|---|---|
open |
Manually opens a datepicker |
myDatepicker.open()
|
close |
Manually closes a datepicker |
myDatepicker.close()
|
dispose
|
Disposes a datepicker instance |
myDatepicker.dispose()
|
getInstance
|
Static method which allows you to get the datepicker instance associated to a DOM element. |
Datepicker.getInstance(datepickerEl)
|
getOrCreateInstance
|
Static method which returns the datepicker instance associated to a DOM element or create a new one in case it wasn't initialized. |
Datepicker.getOrCreateInstance(datepickerEl)
|
update
|
Updates options of a datepicker instance. |
datepicker.update({inline: true})
|
const datepickerEl = document.getElementById('myDatepicker');
const datepicker = new Datepicker(datepickerEl);
datepicker.open();
const datepickerEl = document.getElementById('myDatepicker');
const datepicker = new mdb.Datepicker(datepickerEl);
datepicker.open();
Events
Name | Description |
---|---|
open.mdb.datepicker
|
This event fires immediately when the datepicker is opened. |
close.mdb.datepicker
|
This event fires immediately when the datepicker is closed. |
valueChanged.mdb.datepicker
|
This event fires immediately when the datepicker value is changed. |
viewChanged.mdb.datepicker
|
This event fires after the datepicker view is changed. Information about the current view can
be accessed through the following property of the emitted event: e.view .
|
const myDatepicker = document.getElementById('myDatepicker')
myDatepicker.addEventListener('open.mdb.datepicker', (e) => {
// do something...
})
CSS variables
As part of MDB’s evolving CSS variables approach, datepicker now use local CSS variables for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
Datepicker CSS variables are in different classes which belong to this component. To make it easier to use them, you can find below all of the used CSS variables.
// :root
--#{$prefix}datepicker-backdrop-background-color: #{$datepicker-backdrop-background-color};
--#{$prefix}datepicker-zindex: #{$datepicker-zindex};
--#{$prefix}datepicker-container-zindex: #{$datepicker-container-zindex};
--#{$prefix}datepicker-toggle-right: #{$datepicker-toggle-right};
--#{$prefix}datepicker-toggle-top: #{$datepicker-toggle-top};
--#{$prefix}datepicker-toggle-focus-color: #{$datepicker-toggle-focus-color};
// .datepicker-dropdown-container
--#{$prefix}datepicker-dropdown-container-width: #{$datepicker-dropdown-container-width};
--#{$prefix}datepicker-dropdown-container-height: #{$datepicker-dropdown-container-height};
--#{$prefix}datepicker-dropdown-container-background-color: #{$datepicker-dropdown-container-background-color};
--#{$prefix}datepicker-dropdown-container-border-radius: #{$datepicker-dropdown-container-border-radius};
--#{$prefix}datepicker-dropdown-container-box-shadow: #{$datepicker-dropdown-container-box-shadow};
// .datepicker-modal-container {
--#{$prefix}datepicker-modal-container-transform: #{$datepicker-modal-container-transform};
--#{$prefix}datepicker-modal-container-width: #{$datepicker-modal-container-width};
--#{$prefix}datepicker-modal-container-height: #{$datepicker-modal-container-height};
--#{$prefix}datepicker-modal-container-background-color: #{$datepicker-modal-container-background-color};
--#{$prefix}datepicker-modal-container-border-radius: #{$datepicker-modal-container-border-radius};
--#{$prefix}datepicker-modal-container-box-shadow: #{$datepicker-modal-container-box-shadow};
--#{$prefix}datepicker-modal-container-date-media-margin-top: #{$datepicker-modal-container-date-media-margin-top};
--#{$prefix}datepicker-modal-container-day-cell-media-width: #{$datepicker-modal-container-day-cell-media-width};
--#{$prefix}datepicker-modal-container-day-cell-media-height: #{$datepicker-modal-container-day-cell-media-height};
--#{$prefix}datepicker-modal-container-media-width: #{$datepicker-modal-container-media-width};
--#{$prefix}datepicker-modal-container-media-height: #{$datepicker-modal-container-media-height};
--#{$prefix}datepicker-header-border-radius-landscape: #{$datepicker-header-border-radius-landscape};
--#{$prefix}datepicker-header-height: #{$datepicker-header-height};
--#{$prefix}datepicker-header-padding-x: #{$datepicker-header-padding-x};
--#{$prefix}datepicker-header-background-color: #{$datepicker-header-background-color};
--#{$prefix}datepicker-header-border-radius: #{$datepicker-header-border-radius};
--#{$prefix}datepicker-title-height: #{$datepicker-title-height};
--#{$prefix}datepicker-title-text-font-size: #{$datepicker-title-text-font-size};
--#{$prefix}datepicker-title-text-font-weight: #{$datepicker-title-text-font-weight};
--#{$prefix}datepicker-title-text-letter-spacing: #{$datepicker-title-text-letter-spacing};
--#{$prefix}datepicker-title-text-color: #{$datepicker-title-text-color};
--#{$prefix}datepicker-date-height: #{$datepicker-date-height};
--#{$prefix}datepicker-date-text-font-size: #{$datepicker-date-text-font-size};
--#{$prefix}datepicker-date-text-font-weight: #{$datepicker-date-text-font-weight};
--#{$prefix}datepicker-date-text-color: #{$datepicker-date-text-color};
--#{$prefix}datepicker-footer-height: #{$datepicker-footer-height};
--#{$prefix}datepicker-footer-padding-x: #{$datepicker-footer-padding-x};
--#{$prefix}datepicker-footer-btn-background-color: #{$datepicker-footer-btn-background-color};
--#{$prefix}datepicker-footer-btn-color: #{$datepicker-footer-btn-color};
--#{$prefix}datepicker-footer-btn-disabled-color: #{$datepicker-footer-btn-disabled-color};
--#{$prefix}datepicker-footer-btn-padding-x: #{$datepicker-footer-btn-padding-x};
--#{$prefix}datepicker-footer-btn-font-size: #{$datepicker-footer-btn-font-size};
--#{$prefix}datepicker-footer-btn-font-weight: #{$datepicker-footer-btn-font-weight};
--#{$prefix}datepicker-footer-btn-height: #{$datepicker-footer-btn-height};
--#{$prefix}datepicker-footer-btn-line-height: #{$datepicker-footer-btn-line-height};
--#{$prefix}datepicker-footer-btn-letter-spacing: #{$datepicker-footer-btn-letter-spacing};
--#{$prefix}datepicker-footer-btn-border-radius: #{$datepicker-footer-btn-border-radius};
--#{$prefix}datepicker-footer-btn-margin-bottom: #{$datepicker-footer-btn-margin-bottom};
--#{$prefix}datepicker-footer-btn-state-background-color: #{$datepicker-footer-btn-state-background-color};
// .datepicker-main
--#{$prefix}datepicker-date-controls-padding-top: #{$datepicker-date-controls-padding-top};
--#{$prefix}datepicker-date-controls-padding-x: #{$datepicker-date-controls-padding-x};
--#{$prefix}datepicker-date-controls-color: #{$datepicker-date-controls-color};
--#{$prefix}datepicker-view-change-button-padding: #{$datepicker-view-change-button-padding};
--#{$prefix}datepicker-view-change-button-color: #{$datepicker-view-change-button-color};
--#{$prefix}datepicker-view-change-button-disabled-color: #{$datepicker-view-change-button-disabled-color};
--#{$prefix}datepicker-view-change-button-font-weight: #{$datepicker-view-change-button-font-weight};
--#{$prefix}datepicker-view-change-button-font-size: #{$datepicker-view-change-button-font-size};
--#{$prefix}datepicker-view-change-button-border-radius: #{$datepicker-view-change-button-border-radius};
--#{$prefix}datepicker-view-change-button-state-background-color: #{$datepicker-view-change-button-state-background-color};
--#{$prefix}datepicker-view-change-button-after-border-width: #{$datepicker-view-change-button-after-border-width};
--#{$prefix}datepicker-view-change-button-after-margin-left: #{$datepicker-view-change-button-after-margin-left};
--#{$prefix}datepicker-arrow-controls-margin-top: #{$datepicker-arrow-controls-margin-top};
--#{$prefix}datepicker-previous-button-width: #{$datepicker-previous-button-width};
--#{$prefix}datepicker-previous-button-height: #{$datepicker-previous-button-height};
--#{$prefix}datepicker-previous-button-line-height: #{$datepicker-previous-button-line-height};
--#{$prefix}datepicker-previous-button-color: #{$datepicker-previous-button-color};
--#{$prefix}datepicker-previous-button-disabled-color: #{$datepicker-previous-button-disabled-color};
--#{$prefix}datepicker-previous-button-margin-right: #{$datepicker-previous-button-margin-right};
--#{$prefix}datepicker-previous-button-state-background-color: #{$datepicker-previous-button-state-background-color};
--#{$prefix}datepicker-previous-button-state-border-radius: #{$datepicker-previous-button-state-border-radius};
--#{$prefix}datepicker-previous-button-after-margin: #{$datepicker-previous-button-after-margin};
--#{$prefix}datepicker-previous-button-after-border-width: #{$datepicker-previous-button-after-border-width};
--#{$prefix}datepicker-previous-button-after-transform: #{$datepicker-previous-button-after-transform};
--#{$prefix}datepicker-next-button-width: #{$datepicker-next-button-width};
--#{$prefix}datepicker-next-button-height: #{$datepicker-next-button-height};
--#{$prefix}datepicker-next-button-line-height: #{$datepicker-next-button-line-height};
--#{$prefix}datepicker-next-button-color: #{$datepicker-next-button-color};
--#{$prefix}datepicker-next-button-disabled-color: #{$datepicker-next-button-disabled-color};
--#{$prefix}datepicker-next-button-margin-background-color: #{$datepicker-next-button-margin-background-color};
--#{$prefix}datepicker-next-button-state-border-radius: #{$datepicker-next-button-state-border-radius};
--#{$prefix}datepicker-next-button-after-margin: #{$datepicker-next-button-after-margin};
--#{$prefix}datepicker-next-button-after-border-width: #{$datepicker-next-button-after-border-width};
--#{$prefix}datepicker-next-button-after-transform: #{$datepicker-next-button-after-transform};
--#{$prefix}datepicker-view-padding-x: #{$datepicker-view-padding-x};
--#{$prefix}datepicker-table-width: #{$datepicker-table-width};
--#{$prefix}datepicker-day-heading-width: #{$datepicker-day-heading-width};
--#{$prefix}datepicker-day-heading-height: #{$datepicker-day-heading-height};
--#{$prefix}datepicker-day-heading-font-size: #{$datepicker-day-heading-font-size};
--#{$prefix}datepicker-day-heading-font-weight: #{$datepicker-day-heading-font-weight};
--#{$prefix}datepicker-day-heading-color: #{$datepicker-day-heading-color};
--#{$prefix}datepicker-cell-disabled-color: #{$datepicker-cell-disabled-color};
--#{$prefix}datepicker-cell-hover-background-color: #{$datepicker-cell-hover-background-color};
--#{$prefix}datepicker-cell-selected-background-color: #{$datepicker-cell-selected-background-color};
--#{$prefix}datepicker-cell-selected-color: #{$datepicker-cell-selected-color};
--#{$prefix}datepicker-cell-focused-background-color: #{$datepicker-cell-focused-background-color};
--#{$prefix}datepicker-cell-focused-selected-background-color: #{$datepicker-cell-focused-selected-background-color};
--#{$prefix}datepicker-cell-border-width: #{$datepicker-cell-border-width};
--#{$prefix}datepicker-cell-border-color: #{$datepicker-cell-border-color};
--#{$prefix}datepicker-cell-color: #{$datepicker-cell-color};
--#{$prefix}datepicker-small-cell-width: #{$datepicker-small-cell-width};
--#{$prefix}datepicker-small-cell-height: #{$datepicker-small-cell-height};
--#{$prefix}datepicker-small-cell-content-width: #{$datepicker-small-cell-content-width};
--#{$prefix}datepicker-small-cell-content-height: #{$datepicker-small-cell-content-height};
--#{$prefix}datepicker-small-cell-content-line-height: #{$datepicker-small-cell-content-line-height};
--#{$prefix}datepicker-small-cell-content-border-radius: #{$datepicker-small-cell-content-border-radius};
--#{$prefix}datepicker-small-cell-content-font-size: #{$datepicker-small-cell-content-font-size};
--#{$prefix}datepicker-large-cell-width: #{$datepicker-large-cell-width};
--#{$prefix}datepicker-large-cell-height: #{$datepicker-large-cell-height};
--#{$prefix}datepicker-large-cell-content-width: #{$datepicker-large-cell-content-width};
--#{$prefix}datepicker-large-cell-content-height: #{$datepicker-large-cell-content-height};
--#{$prefix}datepicker-large-cell-content-line-height: #{$datepicker-large-cell-content-line-height};
--#{$prefix}datepicker-large-cell-content-padding-y: #{$datepicker-large-cell-content-padding-y};
--#{$prefix}datepicker-large-cell-content-padding-x: #{$datepicker-large-cell-content-padding-x};
--#{$prefix}datepicker-large-cell-content-border-radius: #{$datepicker-large-cell-content-border-radius};
SCSS variables
$datepicker-toggle-right: -10px;
$datepicker-toggle-top: 50%;
$datepicker-toggle-focus-color: $primary;
$datepicker-backdrop-background-color: rgba(0, 0, 0, 0.4);
$datepicker-dropdown-container-width: 328px;
$datepicker-dropdown-container-height: 380px;
$datepicker-dropdown-container-background-color: var(--#{$prefix}surface-bg);
$datepicker-dropdown-container-border-radius: 0.5rem;
$datepicker-dropdown-container-box-shadow: $box-shadow-4;
$datepicker-modal-container-transform: translate(-50%, -50%);
$datepicker-modal-container-width: 328px;
$datepicker-modal-container-height: 512px;
$datepicker-modal-container-background-color: var(--#{$prefix}surface-bg);
$datepicker-modal-container-border-radius: 0.6rem 0.6rem 0.5rem 0.5rem;
$datepicker-modal-container-box-shadow: $datepicker-dropdown-container-box-shadow;
$datepicker-modal-container-date-media-margin-top: 100px;
$datepicker-modal-container-day-cell-media-width: 32px;
$datepicker-modal-container-day-cell-media-height: $datepicker-modal-container-day-cell-media-width;
$datepicker-modal-container-media-width: 475px;
$datepicker-modal-container-media-height: 360px;
$datepicker-header-height: 120px;
$datepicker-header-padding-x: 24px;
$datepicker-header-background-color: var(--#{$prefix}picker-header-bg);
$datepicker-header-border-radius: 0.5rem 0.5rem 0 0;
$datepicker-header-border-radius-landscape: 0.5rem 0 0 0.5rem;
$datepicker-title-height: 32px;
$datepicker-title-text-font-size: 10px;
$datepicker-title-text-font-weight: 400;
$datepicker-title-text-letter-spacing: 1.7px;
$datepicker-title-text-color: color-contrast($primary);
$datepicker-date-height: 72px;
$datepicker-date-text-font-size: 34px;
$datepicker-date-text-font-weight: 400;
$datepicker-date-text-color: color-contrast($primary);
$datepicker-date-controls-padding-top: 10px;
$datepicker-date-controls-padding-x: 12px;
$datepicker-date-controls-color: rgba(0, 0, 0, 0.64);
$datepicker-view-change-button-padding: 10px;
$datepicker-view-change-button-color: var(--#{$prefix}surface-color);
$datepicker-view-change-button-disabled-color: rgba(
var(--#{$prefix}surface-color-rgb),
0.5
);
$datepicker-view-change-button-font-weight: 500;
$datepicker-view-change-button-font-size: 0.9rem;
$datepicker-view-change-button-border-radius: 10px;
$datepicker-view-change-button-state-background-color: var(--#{$prefix}highlight-bg-color);
$datepicker-view-change-button-after-border-width: 5px;
$datepicker-view-change-button-after-margin-left: 5px;
$datepicker-arrow-controls-margin-top: 10px;
$datepicker-previous-button-width: 40px;
$datepicker-previous-button-height: $datepicker-previous-button-width;
$datepicker-previous-button-line-height: $datepicker-previous-button-height;
$datepicker-previous-button-color: var(--#{$prefix}surface-color);
$datepicker-previous-button-disabled-color: rgba(var(--#{$prefix}surface-color-rgb), 0.5);
$datepicker-previous-button-margin-right: 24px;
$datepicker-previous-button-state-background-color: var(--#{$prefix}highlight-bg-color);
$datepicker-previous-button-state-border-radius: 50%;
$datepicker-previous-button-after-margin: 15.5px;
$datepicker-previous-button-after-border-width: 2px;
$datepicker-previous-button-after-transform: translateX(2px) rotate(-45deg);
$datepicker-next-button-width: 40px;
$datepicker-next-button-height: $datepicker-next-button-width;
$datepicker-next-button-line-height: $datepicker-next-button-height;
$datepicker-next-button-color: var(--#{$prefix}surface-color);
$datepicker-next-button-disabled-color: rgba(var(--#{$prefix}surface-color-rgb), 0.5);
$datepicker-next-button-margin-background-color: var(--#{$prefix}highlight-bg-color);
$datepicker-next-button-state-border-radius: 50%;
$datepicker-next-button-after-margin: 15.5px;
$datepicker-next-button-after-border-width: 2px;
$datepicker-next-button-after-transform: translateX(-2px) rotate(45deg);
$datepicker-view-padding-x: 12px;
$datepicker-table-width: 304px;
$datepicker-day-heading-width: 40px;
$datepicker-day-heading-height: $datepicker-day-heading-width;
$datepicker-day-heading-font-size: 12px;
$datepicker-day-heading-font-weight: 400;
$datepicker-day-heading-color: var(--#{$prefix}surface-color);
$datepicker-cell-disabled-color: rgba(var(--#{$prefix}surface-color-rgb), 0.5);
$datepicker-cell-hover-background-color: var(--#{$prefix}highlight-bg-color);
$datepicker-cell-selected-background-color: $primary;
$datepicker-cell-selected-color: color-contrast($primary);
$datepicker-cell-focused-background-color: var(--#{$prefix}highlight-bg-color);
$datepicker-cell-focused-selected-background-color: $primary;
$datepicker-cell-border-width: 1px;
$datepicker-cell-border-color: var(--#{$prefix}surface-color);
$datepicker-cell-color: var(--#{$prefix}surface-color);
$datepicker-small-cell-width: 40px;
$datepicker-small-cell-height: $datepicker-small-cell-width;
$datepicker-small-cell-content-width: 36px;
$datepicker-small-cell-content-height: $datepicker-small-cell-content-width;
$datepicker-small-cell-content-line-height: $datepicker-small-cell-content-height;
$datepicker-small-cell-content-border-radius: 50%;
$datepicker-small-cell-content-font-size: 13px;
$datepicker-large-cell-width: 76px;
$datepicker-large-cell-height: 42px;
$datepicker-large-cell-content-width: 72px;
$datepicker-large-cell-content-height: 40px;
$datepicker-large-cell-content-line-height: $datepicker-large-cell-content-height;
$datepicker-large-cell-content-padding-y: 1px;
$datepicker-large-cell-content-padding-x: 2px;
$datepicker-large-cell-content-border-radius: 999px;
$datepicker-footer-height: 56px;
$datepicker-footer-padding-x: $datepicker-view-padding-x;
$datepicker-footer-btn-background-color: var(--#{$prefix}surface-bg);
$datepicker-footer-btn-color: var(--#{$prefix}surface-color);
$datepicker-footer-btn-disabled-color: rgba(var(--#{$prefix}surface-color-rgb), 0.5);
$datepicker-footer-btn-padding-x: 10px;
$datepicker-footer-btn-font-size: 0.8rem;
$datepicker-footer-btn-font-weight: 500;
$datepicker-footer-btn-height: 40px;
$datepicker-footer-btn-line-height: $datepicker-footer-btn-height;
$datepicker-footer-btn-letter-spacing: 0.1rem;
$datepicker-footer-btn-border-radius: 10px;
$datepicker-footer-btn-margin-bottom: 10px;
$datepicker-footer-btn-state-background-color: var(--#{$prefix}highlight-bg-color);