Datepicker

Angular 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

HTML

        
            
            <mdb-form-control>
              <input
                mdbInput
                [mdbDatepicker]="datepicker"
                type="text"
                class="form-control"
                id="exampleDatepicker"
              />
              <label mdbLabel for="exampleDatepicker" class="form-label">Select a date</label>
              <mdb-datepicker-toggle [mdbDatepicker]="datepicker"></mdb-datepicker-toggle>
              <mdb-datepicker #datepicker></mdb-datepicker>
            </mdb-form-control>

Inline version

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

Select a date

Show code

HTML

        
            
            <mdb-form-control>
              <input
                mdbInput
                [mdbDatepicker]="datepicker"
                type="text"
                class="form-control"
                id="exampleDatepicker"
              />
              <label mdbLabel for="exampleDatepicker" class="form-label">Select a date</label>
              <mdb-datepicker-toggle [mdbDatepicker]="datepicker"></mdb-datepicker-toggle>
              <mdb-datepicker [inline]="true" #datepicker></mdb-datepicker>
            </mdb-form-control>

Translations

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

Select a date

Show code

HTML
Typescript

        
            
            <mdb-form-control>
              <input
                mdbInput
                [mdbDatepicker]="datepicker"
                type="text"
                class="form-control"
                id="exampleDatepicker"
              />
              <label mdbLabel for="exampleDatepicker" class="form-label">Select a date</label>
              <mdb-datepicker-toggle [mdbDatepicker]="datepicker"></mdb-datepicker-toggle>
              <mdb-datepicker [options]="translationOptions" #datepicker></mdb-datepicker>
            </mdb-form-control>

        
            
            import { Component } from '@angular/core';
            import { MdbDatepickerOptions } from 'mdb-angular-ui-kit/datepicker';

            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
            })
            export class AppComponent {
              translationOptions: MdbDatepickerOptions = {
                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 input to display date in a human-friendly format.

Select a date

Show code

HTML

        
            
            <mdb-form-control>
              <input
                mdbInput
                [mdbDatepicker]="datepicker"
                type="text"
                class="form-control"
                id="exampleDatepicker"
              />
              <label mdbLabel for="exampleDatepicker" class="form-label">Select a date</label>
              <mdb-datepicker-toggle [mdbDatepicker]="datepicker"></mdb-datepicker-toggle>
              <mdb-datepicker #datepicker [format]="'dd, mmm, yyyy'"></mdb-datepicker>
            </mdb-form-control>

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 minDate and maxDate inputs.

Select a date

Show code

HTML
Typescript

        
            
            <mdb-form-control>
              <input
                mdbInput
                [mdbDatepicker]="datepicker"
                type="text"
                class="form-control"
                id="exampleDatepicker"
              />
              <label mdbLabel for="exampleDatepicker" class="form-label">Select a date</label>
              <mdb-datepicker-toggle [mdbDatepicker]="datepicker"></mdb-datepicker-toggle>
              <mdb-datepicker [minDate]="minDate" [maxDate]="maxDate" #datepicker></mdb-datepicker>
            </mdb-form-control>

        
            
            import { Component } from '@angular/core';

            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
            })
            export class AppComponent {
              minDate = new Date(2020, 5, 10);
              maxDate = new Date(2022, 5, 20);
            }

Disable past

Use the minDate input to disallow past date selection.

Select a date

Show code

HTML
Typescript

        
            
            <mdb-form-control>
              <input
                mdbInput
                [mdbDatepicker]="datepicker"
                type="text"
                class="form-control"
                id="exampleDatepicker"
              />
              <label mdbLabel for="exampleDatepicker" class="form-label">Select a date</label>
              <mdb-datepicker-toggle [mdbDatepicker]="datepicker"></mdb-datepicker-toggle>
              <mdb-datepicker #datepicker [minDate]="pastDates"></mdb-datepicker>
            </mdb-form-control>

        
            
            import { Component, OnInit } from '@angular/core';

            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
            })
            export class AppComponent implements OnInit {
              pastDates = new Date(new Date().setHours(0, 0, 0, 0));

              ngOnInit(): void {
                this.pastDates.setDate(this.pastDates.getDate() - 1);
              }
            }

Disable future

Use the maxDate input to disallow future date selection.

Select a date

Show code

HTML
Typescript

        
            
            <mdb-form-control>
              <input
                mdbInput
                [mdbDatepicker]="datepicker"
                type="text"
                class="form-control"
                id="exampleDatepicker"
              />
              <label mdbLabel for="exampleDatepicker" class="form-label">Select a date</label>
              <mdb-datepicker-toggle [mdbDatepicker]="datepicker"></mdb-datepicker-toggle>
              <mdb-datepicker #datepicker [maxDate]="futureDates"></mdb-datepicker>
            </mdb-form-control>

        
            
            import { Component, OnInit } from '@angular/core';

            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
            })
            export class AppComponent implements OnInit {
              futureDates = new Date(new Date().setHours(0, 0, 0, 0));

              ngOnInit(): void {
                this.futureDates.setDate(this.futureDates.getDate() + 1);
              }
            }

Disabled dates

The filter input 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

HTML
Typescript

        
            
            <mdb-form-control>
              <input
                mdbInput
                [mdbDatepicker]="datepicker"
                type="text"
                class="form-control"
                id="exampleDatepicker"
              />
              <label mdbLabel for="exampleDatepicker" class="form-label">Select a date</label>
              <mdb-datepicker-toggle [mdbDatepicker]="datepicker"></mdb-datepicker-toggle>
              <mdb-datepicker [filter]="filterFunction" #datepicker></mdb-datepicker>
            </mdb-form-control>

        
            
            import { Component } from '@angular/core';

            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
            })
            export class AppComponent {
              filterFunction(date: Date): boolean {
                const isSaturday = date.getDay() === 6;
                const isSunday = date.getDay() === 0;

                if (isSaturday || isSunday) {
                  return false;
                }

                return true;
              }
            }

Input toggle

Add (click)="datepicker.open()" method to the input element to enable toggling on input click. It is also possible to remove the toggle button.

Select a date

Show code

HTML

        
            
            <mdb-form-control>
              <input
                mdbInput
                [mdbDatepicker]="datepicker"
                type="text"
                class="form-control"
                id="exampleDatepicker"
                (click)="datepicker.open()"
              />
              <label mdbLabel for="exampleDatepicker" class="form-label">Select a date</label>
              <mdb-datepicker #datepicker="mdbDatepicker"></mdb-datepicker>
            </mdb-form-control>

Custom toggle icon

Icon input

You can set your custom toggle icon with [icon] input.

Select a date

Show code

HTML

        
            
          <mdb-form-control>
            <input
              mdbInput
              [mdbDatepicker]="datepicker"
              type="text"
              class="form-control"
              id="exampleDatepicker"
            />
            <label mdbLabel for="exampleDatepicker" class="form-label">Select a date</label>
            <mdb-datepicker-toggle [icon]="'fas fa-calendar'" [mdbDatepicker]="datepicker"></mdb-datepicker-toggle>
            <mdb-datepicker #datepicker></mdb-datepicker>
          </mdb-form-control>

Icon template

If you want to use more complex toggle icon syntax you can do it by placing HTML code inside ng-template with mdbDatepickerToggleIcon directive.

Select a date

Show code

HTML

        
            
          <mdb-form-control>
            <input
              mdbInput
              [mdbDatepicker]="datepicker"
              type="text"
              class="form-control"
              id="exampleDatepicker"
            />
            <label mdbLabel for="exampleDatepicker" class="form-label">Select a date</label>
            <mdb-datepicker-toggle [mdbDatepicker]="datepicker"
              ><ng-template mdbDatepickerToggleIcon
                ><i class="fa-angular fab datepicker-icon"></i></ng-template
            ></mdb-datepicker-toggle>
            <mdb-datepicker #datepicker></mdb-datepicker>
          </mdb-form-control>

Close without confirmation

With [confirmDateOnSelect] set to true datepicker will close automatically after date selection

Example label

Show code

HTML

        
            
            <mdb-form-control>
              <input
                mdbInput
                [mdbDatepicker]="datepicker"
                type="text"
                class="form-control"
                id="exampleDatepicker"
              />
              <label mdbLabel for="exampleDatepicker" class="form-label">Select a date</label>
              <mdb-datepicker-toggle [mdbDatepicker]="datepicker"></mdb-datepicker-toggle>
              <mdb-datepicker [confirmDateOnSelect]="true" #datepicker></mdb-datepicker>
            </mdb-form-control>

Remove Action Buttons

You can use [removeCancelBtn], [removeClearBtn] and [removeOkBtn] inputs to remove action buttons that you don't need in your datepicker modal.

Example label

Show code

HTML

        
            
           <mdb-form-control>
             <input
               mdbInput
               [mdbDatepicker]="datepicker"
               type="text"
               class="form-control"
               id="exampleDatepicker"
             />
             <label mdbLabel for="exampleDatepicker" class="form-label">Select a date</label>
             <mdb-datepicker-toggle [mdbDatepicker]="datepicker"></mdb-datepicker-toggle>
             <mdb-datepicker [removeClearBtn]="true" #datepicker></mdb-datepicker>
           </mdb-form-control>

Custom header content

You can customize the content of the header by using the mdbDatepickerHeader directive. Simply pass HTML code inside ng-template with directive.

Select a date

Show code

HTML

        
            
            <mdb-form-control>
              <input
                mdbInput
                [mdbDatepicker]="datepicker"
                type="text"
                class="form-control"
                id="exampleDatepicker"
              />
              <label mdbLabel for="exampleDatepicker" class="form-label">Select a date</label>
              <mdb-datepicker-toggle [mdbDatepicker]="datepicker"></mdb-datepicker-toggle>
              <mdb-datepicker #datepicker>
                <ng-template mdbDatepickerHeader>
                  <div class="datepicker-header">
                    <div class="datepicker-title">
                      <span class="datepicker-title-text">Choose date</span>
                    </div>
                    <div class="datepicker-date">
                      <span class="datepicker-date-text"
                        >{{ datepicker.activeDay }}/{{
                          datepicker.activeMonth + 1
                        }}/{{ datepicker.activeYear }}</span
                      >
                    </div>
                  </div></ng-template
                >
              </mdb-datepicker>
            </mdb-form-control>

Validation

Use mdbValidate directive to enable validation styles and mdb-error and mdb-success components to display validation messages.

Note: This example uses MDB Angular Validation. Remember to import MdbValidationModule and ReactiveFormsModule to enable reactive forms validation in Angular.

Show code

HTML
Typescript

        
            
            <form [formGroup]="validationForm" (ngSubmit)="onSubmit()" #form="ngForm">
              <mdb-form-control>
                <input
                  mdbInput
                  mdbValidate
                  [mdbTimepicker]="datepicker"
                  formControlName="inputDate"
                  type="text"
                  class="form-control"
                  id="datepicker"
                  [ngClass]="{
                    'mb-3': form.submitted
                  }"
                />
                <label mdbLabel for="datepicker" class="form-label">Select a date</label>
                <mdb-error *ngIf="inputTime?.invalid && (inputTime?.dirty || inputTime?.touched)"
                  >Please provide a valid date</mdb-error
                >
                <mdb-success *ngIf="inputTime?.valid && (inputTime?.dirty || inputTime?.touched)"
                  >Looks good!</mdb-success
                >
                <mdb-datepicker-toggle
                  [mdbDatepicker]="datepicker"
                ></mdb-datepicker-toggle>
                <mdb-datepicker #datepicker></mdb-datepicker>
              </mdb-form-control>
              <button class="btn btn-primary btn-sm mt-3" type="submit">Submit</button>
            </form>

        
            
              import { Component } from '@angular/core';
              import { AbstractControl, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';

              @Component({
                selector: 'app-root',
                templateUrl: './app.component.html',
              })
              
              export class AppComponent {
                validationForm = new UntypedFormGroup({
                  inputDate: new UntypedFormControl(null, {
                    validators: Validators.required,
                    updateOn: 'submit',
                  }),
                });

                get inputDate(): AbstractControl {
                  return this.validationForm.get('inputDate');
                }
              
                onSubmit(): void {
                  this.validationForm.markAllAsTouched();
                }
              }

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

Typescript

        
            
            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',
            switchToDayViewLabel: 'Choose date',

Datepicker - API

Import

Show code

app.module.ts

        
            
          import { MdbDatepickerModule } from 'mdb-angular-ui-kit/datepicker';
          …
          @NgModule ({
            ...
            imports: [MdbDatepickerModule],
            ...
          })

Inputs

MdbDatepickerComponent

Name	Type	Default	Description
`confirmDateOnSelect`	boolean	`false`	Closes datepicker modal when the date is selected
`disabled`	boolean	`false`	Defines whether component is disabled
`filter`	Function	`(date: Date) => boolean`	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)
`maxDate`	Date	`-`	Changes max available date
`minDate`	Date	`-`	Changes min available date
`options`	any	`MdbDatepickerOptions`	Defines datepicker's options
`removeCancelBtn`	boolean	`false`	Removes `Cancel` button from datepicker modal
`removeClearBtn`	boolean	`false`	Removes `Cancel` button from datepicker modal
`removeOkBtn`	boolean	`false`	Removes `Ok` button from datepicker modal
`startDate`	Date	`-`	Changes default date to which datepicker will navigate
`startDay`	number	`0`	Changes default start day (0 for Sunday, 1 for Monday...)
`startView`	string	`'days'`	Changes default datepicker view (days/years/months)

MdbDatepickerToggleComponent

Name	Type	Default	Description
`disabled`	boolean	`false`	Defines whether component is disabled
`icon`	string	`'far fa-clock'`	Allows to set custom icon
`mdbDatepicker`	MdbDatepickerComponent	`-`	Input for attaching datepicker component

Outputs

Name	Type	Description
`opened`	EventEmitter<void>	This event fires immediately when the datepicker is opened.
`closed`	EventEmitter<void>	This event fires immediately when the datepicker is closed.
`dateChanged`	EventEmitter<Date>	This event fires immediately when the new date is selected.

Show code

HTML
Typescript

        
            
              <mdb-form-control>
                <input
                  mdbInput
                  [mdbDatepicker]="datepicker"
                  type="text"
                  class="form-control"
                  id="exampleDatepicker"
                />
                <label mdbLabel for="exampleDatepicker" class="form-label">Select a date</label>
                <mdb-datepicker-toggle [mdbDatepicker]="datepicker"></mdb-datepicker-toggle>
                <mdb-datepicker
                #datepicker
                (opened)="onDatepickerOpen()"
                (closed)="onDatepickerClose()"
                (dateChanged)="onDatepickerDateChange($event)"
              ></mdb-datepicker>
              </mdb-form-control>

        
            
              import { Component } from '@angular/core';

              @Component({
                selector: 'app-root',
                templateUrl: './app.component.html',
              })
              export class AppComponent {
                onDatepickerOpen(): void {
                  console.log('datepicker open');
                }

                onDatepickerDateChange(event: Date): void {
                  console.log('datepicker date change', event);
                }
              }

Methods

Name	Description	Example
`open`	Manually opens a datepicker	`datepicker.open()`
`close`	Manually closes a datepicker	`datepicker.close()`

Show code

HTML
Typescript

        
            
              <mdb-form-control>
                <input
                  mdbInput
                  [mdbDatepicker]="datepicker"
                  type="text"
                  class="form-control"
                  id="exampleDatepicker"
                />
                <label mdbLabel for="exampleDatepicker" class="form-label">Select a date</label>
                <mdb-datepicker-toggle [mdbDatepicker]="datepicker"></mdb-datepicker-toggle>
                <mdb-datepicker #datepicker></mdb-datepicker>
              </mdb-form-control>
              <button class="btn btn-primary" (click)="openDatepicker(); $event.stopPropagation()">Open datepicker</button>

        
            
              import { Component, ViewChild } from '@angular/core';
              import { MdbDatepickerComponent } from 'mdb-angular-ui-kit/datepicker';

              @Component({
                selector: 'app-root',
                templateUrl: './app.component.html',
              })
              export class AppComponent {
                @ViewChild('datepicker', { static: true }) datepicker!: MdbDatepickerComponent;

                openDatepicker(): void {
                  this.datepicker.open();
                }
              }

Advanced types

MdbDatepickerOptions

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
`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
`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
`okBtnLabel`	string	`'Confirm selection'`	Changes ok button aria label
`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
`switchToDayViewLabel`	string	`'Choose date'`	Changes view change button aria label in months/years view
`switchToMultiYearViewLabel`	string	`'Choose year and month'`	Changes view change button aria label in days view
`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

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: 40px;
        $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

Angular Bootstrap 5 Datepicker

Basic example

Inline version

Translations

Formats

Formatting rules

Date limits

Disable past

Disable future

Disabled dates

Input toggle

Custom toggle icon

Icon input

Icon template

Close without confirmation

Remove Action Buttons

Custom header content

Validation

Accessibility

Related resources

Datepicker - API

Import

Inputs

MdbDatepickerComponent

MdbDatepickerToggleComponent

Outputs

Methods

Advanced types

MdbDatepickerOptions

CSS variables

SCSS variables