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

Required ES init: Datepicker *
* 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.

Edit in sandbox 
        
            
          <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.

Edit in sandbox 
        
            
          <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.

Edit in sandbox 
        
            
          <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.

Edit in sandbox 
        
            
          <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.

Edit in sandbox 
        
            
          <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.

Edit in sandbox 
        
            
          <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.

Edit in sandbox 
        
            
          <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.

Edit in sandbox 
        
            
          <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.

Edit in sandbox 
        
            
          <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.

Edit in sandbox 
        
            
          <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.

Edit in sandbox 
        
            
        <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,
        });

Remove Action Buttons

You can use options removeOkBtn, removeCancelBtn or removeClearBtn to remove action buttons that you don't need in your datepicker modal.

Edit in sandbox 
        
            
        <div class="form-outline remove-clear-button" data-mdb-input-init>
          <input type="text" class="form-control" id="exampleDatepicker8" />
          <label for="exampleDatepicker8" class="form-label">Example label</label>
        </div>
        
        
    
        
            
        import { Datepicker, Input, initMDB } from "mdb-ui-kit";

        initMDB({ Input });

        const datepickerWithoutClearButton = document.querySelector('.remove-clear-button');
        new Datepicker(datepickerWithoutClearButton, {
          removeClearBtn: true,
        });
        
        
    
        
            
        const datepickerWithoutClearButton = document.querySelector('.remove-clear-button');
        new mdb.Datepicker(datepickerWithoutClearButton, {
          removeClearBtn: 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 without headerTemplateModifier 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.

Edit in sandbox 
        
            
        <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:

Edit in sandbox 
        
            
            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.

Edit in sandbox 
        
            
          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.

Edit in sandbox 
        
            
        <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

Edit in sandbox 
        
            
      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 - Disables dates that meet the specified condition
format String 'dd/mm/yyyy' Changes date format displayed in input
headerTemplate String - 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 - 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 Date - Changes max available date
min Date - 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 Date - 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})
Edit in sandbox 
        
            
            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.
Edit in sandbox 
        
            
            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.

Edit in sandbox 
        
            
        // :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

Edit in sandbox 
        
            
        $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);