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

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.

Select a date

Show code Edit in sandbox

HTML

        
            
          <div class="form-outline datepicker">
            <input type="text" class="form-control" id="exampleDatepicker11" />
            <label for="exampleDatepicker11" class="form-label">Select a date</label>
          </div>

Inline version

Use the data-mdb-inline="true" attribute to initialize and set the default date for an inline datepicker inside a block element.

Select a date

Show code Edit in sandbox

HTML

        
            
          <div class="form-outline datepicker" data-mdb-inline="true">
            <input type="text" class="form-control" id="exampleDatepicker2" />
            <label for="exampleDatepicker2" class="form-label">Select a date</label>
          </div>

Translations

The picker can be customized to add support for internationalization. Modify the component options to add translations.

Select a date

Show code Edit in sandbox

HTML
JavaScript

        
            
          <div class="form-outline datepicker-translated">
            <input type="text" class="form-control" id="exampleDatepicker3" />
            <label for="exampleDatepicker3" class="form-label">Select a date</label>
          </div>

        
            
            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.

Select a date

Show code Edit in sandbox

HTML

        
            
          <div class="form-outline datepicker" 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>

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.

Select a date

Show code Edit in sandbox

HTML
JavaScript

        
            
          <div class="form-outline datepicker-with-limits">
            <input type="text" class="form-control" id="exampleDatepicker5" />
            <label for="exampleDatepicker5" class="form-label">Select a date</label>
          </div>

        
            
          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

Use the disablePast option to disallow past date selection.

Select a date

Show code Edit in sandbox

HTML
JavaScript

        
            
          <div class="form-outline datepicker-disable-past">
            <input type="text" class="form-control" id="exampleDatepicker6" />
            <label for="exampleDatepicker6" class="form-label">Select a date</label>
          </div>

        
            
          const datepickerDisablePast = document.querySelector('.datepicker-disable-past');
          new mdb.Datepicker(datepickerDisablePast, {
            disablePast: true
          });

Disable future

Use the disableFuture option to disallow past date selection.

Select a date

Show code Edit in sandbox

HTML
JavaScript

        
            
          <div class="form-outline datepicker-disable-future">
            <input type="text" class="form-control" id="exampleDatepicker7" />
            <label for="exampleDatepicker7" class="form-label">Select a date</label>
          </div>

        
            
          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.

Select a date

Show code Edit in sandbox

HTML
JavaScript

        
            
          <div class="form-outline datepicker-with-filter">
            <input type="text" class="form-control" id="exampleDatepicker8" />
            <label for="exampleDatepicker8" class="form-label">Select a date</label>
          </div>

        
            
          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.

Select a date

Show code Edit in sandbox

HTML

        
            
          <div class="form-outline datepicker" 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>

Custom toggle icon

You can customize the toggle icon by adding a toggle button template to the component HTML.

Select a date

Show code Edit in sandbox

HTML

        
            
          <div class="form-outline datepicker" 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>

Close without confirmation

This option close datepicker when the date is selected.

Example label

Show code Edit in sandbox

HTML
JavaScript

        
            
        <div class="form-outline confirm-date-on-select">
          <input type="text" class="form-control" id="exampleDatepicker11" />
          <label for="exampleDatepicker11" class="form-label">Example label</label>
        </div>

        
            
        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.

Example label

Show code Edit in sandbox

HTML
JavaScript

        
            
        <div class="form-outline remove-clear-button">
          <input type="text" class="form-control" id="exampleDatepicker8" />
          <label for="exampleDatepicker8" class="form-label">Example label</label>
        </div>

        
            
        const datepickerWithoutClearButton = document.querySelector('.remove-clear-button');
        new mdb.Datepicker(datepickerWithoutClearButton, {
        removeClearBtn: true,
        });

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:

Show code 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: 'Choose year and month',
            switchToMonthViewLabel: 'Choose date',
            switchToDayViewLabel: 'Choose date',

Datepicker - API

Usage

Via data attributes

Show code Edit in sandbox

HTML

        
            
        <div class="form-outline datepicker">
          <input type="text" class="form-control" id="exampleDatepicker1" />
          <label for="exampleDatepicker1" class="form-label">Select a date</label>
        </div>

Via JavaScript

Show code Edit in sandbox

        
            
        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-disable-future="".

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
`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	`'Choose date'`	Changes view change button aria label in years view
`switchToMonthViewLabel`	String	`'Choose date'`	Changes view change button aria label in months view
`switchToMultiYearViewLabel`	String	`'Choose year and month'`	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})`

Show code Edit in sandbox

        
            
            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.
`dateChange.mdb.datepicker`	This event fires immediately when the new date is selected.

Show code Edit in sandbox

        
            
            const myDatepicker = document.getElementById('myDatepicker')
            myDatepicker.addEventListener('open.mdb.datepicker', (e) => {
              // do something...
            })

Import

MDB UI KIT also works with module bundlers. Use the following code to import this component:

Show code Edit in sandbox

        
            
        import { Datepicker } from 'mdb-ui-kit';

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.

Show code 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-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-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-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-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-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-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

Show code Edit in sandbox

SCSS

        
            
        $datepicker-zindex: 1065;
        $datepicker-container-zindex: 1066;

        $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: $white;
        $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: $white;
        $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: $primary;
        $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: $white;

        $datepicker-date-height: 72px;
        $datepicker-date-text-font-size: 34px;
        $datepicker-date-text-font-weight: 400;
        $datepicker-date-text-color: $white;

        $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: #666;
        $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: #eee;
        $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: rgba(0, 0, 0, 0.64);
        $datepicker-previous-button-margin-right: 24px;
        $datepicker-previous-button-state-background-color: #eee;
        $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: rgba(0, 0, 0, 0.64);
        $datepicker-next-button-margin-background-color: #eee;
        $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-cell-disabled-color: #ccc;
        $datepicker-cell-hover-background-color: #d3d3d3;
        $datepicker-cell-selected-background-color: $primary;
        $datepicker-cell-selected-color: $white;
        $datepicker-cell-focused-background-color: #eee;
        $datepicker-cell-focused-selected-background-color: $primary;
        $datepicker-cell-border-width: 1px;
        $datepicker-cell-border-color: $black;

        $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: $white;
        $datepicker-footer-btn-color: $primary;
        $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: #eee;

Datepicker

Bootstrap 5 Datepicker

Basic example

Inline version

Translations

Formats

Formatting rules

Date limits

Disable past

Disable future

Disabled dates

Input toggle

Custom toggle icon

Close without confirmation

Remove Action Buttons

Accessibility

Related resources

Datepicker - API

Usage

Via data attributes

Via JavaScript

Options

Methods

Events

Import

CSS variables

SCSS variables