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';

            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
            })
            export class AppComponent {
              translationOptions = {
                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);
            }

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

You can customize the toggle icon by modifying icon input of the toggle component.

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>

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>

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

Name	Type	Default	Description
`confirmDateOnSelect`	Boolean	`false`	Closes datepicker modal when the date is selected
`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
`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)

Options

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
`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
`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
`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

Outputs

Name	Description
`opened`	This event fires immediately when the datepicker is opened.
`closed`	This event fires immediately when the datepicker is closed.
`dateChanged`	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()"></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');
                }
              }

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();
                }
              }

Datepicker

Angular Bootstrap 5 Datepicker

Basic example

Inline version

Translations

Formats

Formatting rules

Date limits

Disabled dates

Input toggle

Custom toggle icon

Close without confirmation

Remove Action Buttons

Accessibility

Related resources

Datepicker - API

Import

Inputs

Options

Outputs

Methods