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.

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

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

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

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

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

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

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

<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

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

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

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

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