Datepicker

React Bootstrap 5 Datepicker component

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

        
            
            import React from 'react';
            import { MDBDatepicker } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
                <MDBDatepicker />
              );
            }

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

        
            
            import React from 'react';
            import { MDBDatepicker } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
                <MDBDatepicker inline />
              );
            }

Translations

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

Select a date

Show code

        
            
            import React from 'react';
            import { MDBDatepicker } from 'mdb-react-ui-kit';
    
            export default function App() {       
              return (
                <MDBDatepicker
                  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

        
            
            import React from 'react';
            import { MDBDatepicker } from 'mdb-react-ui-kit';
    
            export default function App() {    
              return (
                <MDBDatepicker format='dd, mm, yyyy' />
              );
            }

Formatting rules

The following rules can be used to format any date:

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 properties.

Select a date

Show code

        
            
            import React from 'react';
            import { MDBDatepicker } from 'mdb-react-ui-kit';
    
            export default function App() {      
              return (
                <MDBDatepicker
                  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

        
            
            import React from 'react';
            import { MDBDatepicker } from 'mdb-react-ui-kit';
    
            export default function App() {      
              return (
                <MDBDatepicker disablePast />
              );
            }

Disable future

Use the disableFuture option to disallow past date selection.

Select a date

Show code

        
            
            import React from 'react';
            import { MDBDatepicker } from 'mdb-react-ui-kit';
    
            export default function App() {      
              return (
                <MDBDatepicker disableFuture />
              );
            }

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

        
            
            import React from 'react';
            import { MDBDatepicker } from 'mdb-react-ui-kit';
    
            export default function App() {        
              return (
                <MDBDatepicker
                  filter={function filterFunction(date: Date) {
                    const isSaturday = date.getDay() === 6;
                    const isSunday = date.getDay() === 0;
    
                    if (isSaturday || isSunday) {
                      return false;
                    }
                  }}
                />
              );
            }

Input toggle

Add toggleInput property to the input element to enable toggling on input click.

Select a date

Show code

        
            
            import React from 'react';
            import { MDBDatepicker } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
                <MDBDatepicker inputToggle  />
              );
            }

Custom toggle icon

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

Select a date

Show code

        
            
            import React} from 'react';
            import { MDBDatepicker, MDBIcon } from 'mdb-react-ui-kit';
    
            export default function App() {       
              return (
                <MDBDatepicker icon='fas fa-calendar' />
              );
            }

Custom header content

You can edit the contents of the MDBDatepicker header by adding customHeader prop and the JSX code as its value. You can use getFormattedDateValues event to get acces to object with 6 values: dayNumber, weekdayShort, weekdayFull, monthShort, monthFull, yearShort, yearFull which you can use however you like.

        
            
          import React, { useState } from 'react';
          import { MDBDatepicker } from 'mdb-react-ui-kit';
  
          export default function App() {
            const [activeDateValues, setActiveDateValues] = useState<{ [key: string]: string }>({});
            
            return (
              <>
              <MDBDatepicker
                getFormattedDateValues={(e: { [key: string]: string }) => {
                  setActiveDateValues(e);
                }}
                customHeader={
                  <div className='text-white' style={{ fontSize: '12px' }}>
                    <p className='m-0'>
                      Selected: Weekday: {activeDateValues.weekdayShort} - Day:
                      {activeDateValues.dayNumber} - Month: {activeDateValues.monthFull}
                    </p>
                  </div>
                }
              ></MDBDatepicker>
              </>
            );
          }

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

        
            
            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

Import

Show code

        
            
            import { MDBDatepicker } from 'mdb-react-ui-kit';

Properties

MDBDatepicker

Name	Type	Default	Description	Example
`cancelBtnText`	React.ReactNode	`'CANCEL'`	Change cancel button text.	`<MDBDatepicker cancelBtnText='QUIT' />`
`clearBtnText`	React.ReactNode	`'CLEAR'`	Change clear button text.	`<MDBDatepicker clearBtnText='RESET' />`
`closeOnEsc`	boolean	`true`	Disable closing `MDBDatepicker` on escape.	`<MDBDatepicker closeOnEsc={false} />`
`customIcon`	string	`'far fa-calendar'`	Change default icon.	`<MDBDatepicker customIcon='fas fa-calendar' />`
`customHeader`	React.ReactNode	`''`	Change default custom header content.	`<MDBDatepicker customHeader={<p>Custom content</p>}/>`
`defaultValue`	string	`''`	Default value of `MDBDatepicker`.	`<MDBDatepicker defaultValue='13/04/2023' />`
`disableFuture`	boolean	`false`	Disables selection of future dates.	`<MDBDatepicker disableFuture />`
`disablePast`	boolean	`false`	Disables selection of past dates.	`<MDBDatepicker disablePast />`
`disablePortal`	Boolean	`false`	When true, component will be rendered in standard DOM hierarchy.	`<MDBDatepicker disablePortal />`
`format`	string	`'dd/mm/yyyy'`	Change date format displayed in input.	`<MDBDatepicker format='dd-mm-yyyy' />`
`inline`	boolean	`false`	Change datepicker display mode to inline (dropdown).	`<MDBDatepicker inline />`
`inputToggle`	boolean	`false`	Turn on `MDBDatepicker` on input focus.	`<MDBDatepicker inputToggle />`
`inputId`	string	`''`	Set input's ID.	`<MDBDatepicker inputId="example-id" />`
`inputLabel`	React.ReactNode	`'Select a date'`	Change default label.	`<MDBDatepicker inputLabel='Pick date' />`
`max`	Date	`-`	Change max available date.	`<MDBDatepicker max={new Date(2021, 10, 14)}/>`
`min`	Date	`-`	Change min available date.	`<MDBDatepicker min={new Date(2020, 5, 10)} />`
`monthsFull`	string[]	`[ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December', ]`	Change months full names.	`<MDBDatepicker monthsFull={customMonthsFull} />`
`monthsShort`	string[]	`['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']`	Change months short names.	`<MDBDatepicker monthsShort={customMonthsShort} />`
`okBtnText`	ReactNode	`'Ok'`	Change button text in DatepickerFooter.	`<MDBDatepicker okBtnText='Accept' />`
`startDay`	number	`0`	Change default start day (0 for Sunday, 1 for Monday...).	`<MDBDatepicker startDay={1} />`
`title`	string	`'Select date'`	Change datepicker title.	`<MDBDatepicker title='Datepicker' />`
`value`	string	`-`	Controls datepicker's value.	`<MDBDatepicker value={datepickerValue} onChange={(date) => setDatepickerValue(date)} />`
`views`	'days' \| 'months' \| 'years'	`'days'`	Set default view.	`<MDBDatepicker views='months' />`
`weekdaysFull`	string[]	`['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']`	Change weekdays full names.	`<MDBDatepicker weekdaysFull={customWeekdaysFull} />`
`weekdaysNarrow`	string[]	`['S', 'M', 'T', 'W', 'T', 'F', 'S']`	Change weekdays narrow names.	`<MDBDatepicker weekdaysNarrow={customWeekdaysNarrow} />`
`weekdaysShort`	string[]	`['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']`	Change weekdays short names.	`<MDBDatepicker weekdaysShort={customWeekdaysShort} />`
`wrapperClass`	string	`''`	Add custom class to the `MDBDatepicker` wrapper element.	`<MDBDatepicker wrapperClass="class" />`
`selectOnClick`	boolean	`false`	Select date and close modal after day click in modal mode.	`<MDBDatepicker selectOnClick />`

Methods

Name	Type	Description
`filter`	(date: Date) => boolean	Defines filter function for `MDBDatepicker`

Events

Name	Type	Description
`onChange`	(value: string, date: Date) => void	This event fires immediately when the new date is selected.
`onClose`	() => void	Fires when datepicker demands to be closed
`onClosed`	() => void
`onOpen`	() => void	Fires when datepicker demands to be opened
`onOpened`	() => void	Fires after opening transition is completed
`getFormattedDateValues`	({ dayNumber: string; weekdayShort: string; weekdayFull: string; monthShort: string; monthFull: string; yearShort: string; yearFull: string; }) => void	This event fires when active date changes. It can be used to set `customHeader`.

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

        
            
        // :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

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

React Bootstrap 5 Datepicker component

Basic example

Inline version

Translations

Formats

Formatting rules

Date limits

Disable past

Disable future

Disabled dates

Input toggle

Custom toggle icon

Custom header content

Accessibility

Related resources

Datepicker - API

Import

Properties

MDBDatepicker

Methods

Events

CSS variables

SCSS variables