Angular Bootstrap Date Picker

Angular Date Picker - Bootstrap 4 & Material Design

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a 50% discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
get 50% discount on MDB5 PRO

Angular Bootstrap's date picker is a component that allows users to choose a date from the calendar.

Basic example MDB Pro component 

        
            
            <mdb-date-picker name="mydate" [options]="myDatePickerOptions" [placeholder]="'Selected date'" [(ngModel)]="model" required></mdb-date-picker>
          
        
    
        
            
            import { Component } from '@angular/core';
            import { IMyOptions } from 'ng-uikit-pro-standard';

            @Component({
              selector: 'date-picker-component-example',
              templateUrl: 'date-picker.component.html'
            })
            export class DatePickerComponentExample {
              myDatePickerOptions: IMyOptions = {
                // Your options
              };
            }

Inline version MDB Pro component

Live example 
        
            
            <mdb-date-picker
              [inline]="true"
              name="mydate"
              [options]="myDatePickerOptions"
              [placeholder]="'Selected date'"
              [(ngModel)]="model"
              required>
            </mdb-date-picker>
          
        
    
        
            
            import { Component } from '@angular/core';
            import { IMyOptions } from 'ng-uikit-pro-standard';

            @Component({
              selector: 'date-picker-inline-component-example',
              templateUrl: 'date-picker-inline.component.html'
            })
            export class DatePickerInlineComponentExample {
              myDatePickerOptions: IMyOptions = {
                // Your options
              };
            }

Options usage MDB Pro component

You can customize date picker options in your component typescript file.

        
            
            <mdb-date-picker name="mydate" [options]="myDatePickerOptions" [placeholder]="'Selected date'" [(ngModel)]="model" required></mdb-date-picker>
          
        
    
        
            
            import { Component } from '@angular/core';
            import { IMyOptions } from 'ng-uikit-pro-standard';

            @Component({
              selector: 'date-picker-component-example',
              templateUrl: 'date-picker.component.html'
            })
            export class DatePickerComponentExample {
              myDatePickerOptions: IMyOptions = {
                // Strings and translations
                dayLabels: {su: 'Sun', mo: 'Mon', tu: 'Tue', we: 'Wed', th: 'Thu', fr: 'Fri', sa: 'Sat'},
                dayLabelsFull: {su: "Sunday", mo: "Monday", tu: "Tuesday", we: "Wednesday", th: "Thursday", fr: "Friday", sa:
                "Saturday"},
                monthLabels: { 1: 'Jan', 2: 'Feb', 3: 'Mar', 4: 'Apr', 5: 'May', 6: 'Jun', 7: 'Jul', 8: 'Aug', 9: 'Sep', 10:
                'Oct', 11: 'Nov', 12: 'Dec' },
                monthLabelsFull: { 1: "January", 2: "February", 3: "March", 4: "April", 5: "May", 6: "June", 7: "July", 8:
                "August", 9: "September", 10: "October", 11: "November", 12: "December" },
                // Buttons
                todayBtnTxt: "Today",
                clearBtnTxt: "Clear",
                closeBtnTxt: "Close",
                // Format
                dateFormat: 'dd.mm.yyyy',
                // First day of the week
                firstDayOfWeek: 'mo',
                // // Disable dates
                disableUntil: {year: 2018, month: 10, day: 1},
                disableSince: {year: 2018, month: 10, day: 31},
                disableDays: [{year: 2018, month: 10, day: 3}],
                disableDateRanges: [{begin: {year: 2018, month: 10, day: 5}, end: {year: 2018, month: 10, day: 7}}],
                disableWeekends: false,
                // Enable dates (when disabled)
                // Year limits
                minYear: 1000,
                maxYear: 9999,
                // Show Today button
                showTodayBtn: true,
                // Show Clear date button
                showClearDateBtn: true,
                markCurrentDay: true,
                markDates: [{dates: [{year: 2018, month: 10, day: 20}], color: '#303030'}],
                markWeekends: undefined,
                disableHeaderButtons: false,
                showWeekNumbers: false,
                height: '100px',
                width: '50%',
                selectionTxtFontSize: '15px'
              };
            }

Global options MDB Pro component

You can set global options in MDB_DATE_OPTIONS provider. Global options will be overwritten by local options (passed to options input of specific mdb-date-picker component).

        
            
            <mdb-date-picker name="mydate" [options]="myDatePickerOptions" [placeholder]="'Selected date'"></mdb-date-picker>
          
        
    
        
            
            import { Component } from '@angular/core';
            import { IMyOptions } from 'ng-uikit-pro-standard';

            @Component({
            selector: 'date-picker-component-example',
            templateUrl: 'date-picker.component.html'
            })
            export class DatePickerComponentExample {
              myDatePickerOptions: IMyOptions = {
                // options defined locally, will be used only by this specific date picker
                // and will overwrite global options
              };
            }
          
        
    
        
            
            import { BrowserModule } from '@angular/platform-browser';
            import { NgModule } from '@angular/core';
            import { AppComponent } from './app.component';
            import { MDBBootstrapModulesPro, MDB_DATE_OPTIONS } from 'ng-uikit-pro-standard';

            @NgModule({
              declarations: [AppComponent],
              imports: [
                BrowserModule,
                MDBBootstrapModulesPro.forRoot(),
              ],
              providers: [
                // options defined globally, will be used by all date pickers in application
                { provide: MDB_DATE_OPTIONS, useValue: { showTodayBtn: false } }],
                bootstrap: [AppComponent],
            })
            export class AppModule {}

Variations MDB Pro component

Table of Contents:

  1. Strings
  2. Buttons
  3. Formats
  4. First weekday
  5. Years limits
  6. Disable dates
  7. Mark dates

Strings

Change the month and weekday labels:

        
            
            import { Component } from '@angular/core';
            import { IMyOptions } from 'ng-uikit-pro-standard';

            @Component({
              selector: 'date-picker-component-example',
              templateUrl: 'date-picker.component.html'
            })
            export class DatePickerComponentExample {
              myDatePickerOptions: IMyOptions = {
                dayLabels: {su: 'Son', mo: 'Mon', tu: 'Die', we: 'Mit', th: 'Don', fr: 'Fre', sa: 'Sam'},
                dayLabelsFull: {su: "Sonntag", mo: "Montag", tu: "Dienstag", we: "Mittwoch", th: "Donnerstag", fr: "Freitag",
                sa: "Samstag"},
                monthLabels: { 1: 'Jan', 2: 'Feb', 3: 'Mär', 4: 'Apr', 5: 'Mai', 6: 'Jun', 7: 'Jul', 8: 'Aug', 9: 'Sep', 10:
                'Okt', 11: 'Nov', 12: 'Dez' },
                monthLabelsFull: { 1: "Januar", 2: "Februar", 3: "März", 4: "April", 5: "Mai", 6: "Juni", 7: "Juli", 8:
                "August", 9: "September", 10: "Oktober", 11: "November", 12: "Dezember" }
              };
            }

Buttons

Change the text or hide a button completely:

        
            
            import { Component } from '@angular/core';
            import { IMyOptions } from 'ng-uikit-pro-standard';

            @Component({
              selector: 'date-picker-component-example',
              templateUrl: 'date-picker.component.html'
            })
            export class DatePickerComponentExample {
              myDatePickerOptions: IMyOptions = {
                todayBtnTxt: "Today",
                clearBtnTxt: "Clear",
                closeBtnTxt: "Close",
                showTodayBtn: true,
                showClearDateBtn: true
              };
            }

Formats

Display a human-friendly format.

        
            
            import { Component } from '@angular/core';
            import { IMyOptions } from 'ng-uikit-pro-standard';

            @Component({
            selector: 'date-picker-component-example',
            templateUrl: 'date-picker.component.html'
            })
            export class DatePickerComponentExample {
              myDatePickerOptions: IMyOptions = {
                dateFormat: 'dd.mm.yyyy'
              };
            }

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 The month of the year 1 – 12
mm The 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 1000 – 9999

First weekday

The first day of the week can be set to either Sunday or Monday.

        
            
            import { Component } from '@angular/core';
            import { IMyOptions } from 'ng-uikit-pro-standard';

            @Component({
            selector: 'date-picker-component-example',
            templateUrl: 'date-picker.component.html'
            })
            export class DatePickerComponentExample {
              myDatePickerOptions: IMyOptions = {
                firstDayOfWeek: 'mo' // 'mo' - Monday, 'tu' - Tuesday, 'we' - Wednesday, 'th' - Thursday, 'fr' - Friday, 'sa' - Saturday, 'su' - Sunday
              };
            }

Year limits

Set the minimum and maximum selectable years on the picker.

        
            
            import { Component } from '@angular/core';
            import { IMyOptions } from 'ng-uikit-pro-standard';

            @Component({
                selector: 'date-picker-component-example',
                templateUrl: 'date-picker.component.html'
            })
            export class DatePickerComponentExample {
              myDatePickerOptions: IMyOptions = {
                minYear: 2015,
                maxYear: 2017
              };
            }

Disable dates

Disable a specific or arbitrary set of dates selectable on the picker.

        
            
            import { Component } from '@angular/core';
            import { IMyOptions } from 'ng-uikit-pro-standard';

            @Component({
            selector: 'date-picker-component-example',
            templateUrl: 'date-picker.component.html'
            })
            export class DatePickerComponentExample {
              myDatePickerOptions: IMyOptions = {
                disableUntil: {year: 2016, month: 8, day: 10}, // Disable dates backward starting from the given date.
                disableSince: {year: 2017, month: 7, day: 22}, // Disable dates forward starting from the given date.
                disableDays: [{year: 2016, month: 11, day: 14}, {year: 2016, month: 1, day: 15}], // Disable single dates one by one.
                disableDateRanges: [{begin: {year: 2016, month: 11, day: 14}, end: {year: 2016, month: 11, day: 20}}], // Disable date ranges.
                disableWeekends: true, //Disable weekends (Saturday and Sunday).
                enableDays: [{year: 2016, month: 8, day: 1}, {year: 2017, month: 8, day: 15}], // Enable given dates one by one if the date is disabled.
              };
            }

Mark dates

Mark a specific or arbitrary set of dates on the picker.

        
            
            import { Component } from '@angular/core';
            import { IMyOptions } from 'ng-uikit-pro-standard';

            @Component({
            selector: 'date-picker-component-example',
            templateUrl: 'date-picker.component.html',
            })
            export class DatePickerComponentExample {
              myDatePickerOptions: IMyOptions = {
                markDates: [
                  {
                    dates: [{year: 2016, month: 11, day: 14}, {year: 2016, month: 12, day: 16}],
                    color: '#004198'
                  },
                  {
                    dates: [{year: 2017, month: 10, day: 2}, {year: 2017, month: 11, day: 6}],
                    color: 'green'
                  }
                ], // Mark dates for different colors.
                markWeekends: {marked: true, color: 'red'} // Mark weekends (Saturday and Sunday)
              };
            }

Translation MDB Pro component

Use the LocaleService Date Picker class to provide global translation options to every Date Picker element in your application. 

        
            
            <mdb-date-picker
              name="mydate"
              #datePicker
              [options]="myDatePickerOptions"
              [placeholder]="'Selected date'"
              [locale]="'de'"
              [(ngModel)]="model"
              required>
            </mdb-date-picker>
          
        
    
        
            
            import { IMyOptions, MDBDatePickerComponent, LocaleService } from 'ng-uikit-pro-standard';
            import { Component, OnInit, ViewChild } from '@angular/core';

            @Component({
              selector: 'datepicker-translate',
              templateUrl: './datepicker-translate.component.html',
              styleUrls: ['./datepicker-translate.component.scss'],
            })
            export class DatePickerTranslateComponent implements OnInit {
              @ViewChild('datePicker', { static: true }) datePicker!: MDBDatePickerComponent;

              myDatePickerOptions: IMyOptions = {};

              locales = {
                'de': {
                  dayLabels: { su: 'Son', mo: 'Mon', tu: 'Die', we: 'Mit', th: 'Don', fr: 'Fre', sa: 'Sam' },
                  dayLabelsFull: { su: 'Sonntag', mo: 'Montag', tu: 'Dienstag', we: 'Mittwoch', th: 'Donnerstag', fr: 'Freitag', sa: 'Samstag' },
                  monthLabels: {
                    1: 'Jan', 2: 'Feb', 3: 'Mär', 4: 'Apr', 5: 'Mai', 6: 'Jun',
                    7: 'Jul', 8: 'Aug', 9: 'Sep', 10: 'Okt', 11: 'Nov', 12: 'Dez'
                  },
                  monthLabelsFull: {
                    1: 'Januar', 2: 'Februar', 3: 'März', 4: 'April', 5: 'Mai', 6: 'Juni', 7: 'Juli',
                    8: 'August', 9: 'September', 10: 'Oktober', 11: 'November', 12: 'Dezember'
                  },
                  dateFormat: 'dd mmmm yyyy',
                  todayBtnTxt: 'Heute',
                  clearBtnTxt: 'Klar',
                  closeBtnTxt: 'Schließen',
                  firstDayOfWeek: 'mo',
                  sunHighlight: true,
                }
              };

              constructor(private localeService: LocaleService) {
                this.localeService.setLocaleOptions(this.locales);
              }
            }

Open and hide programmatically MDB Pro component

You can get access to date picker methods from another component.

        
            
            <mdb-date-picker
              #datePicker
              name="mydate"
              [options]="myDatePickerOptions"
              [placeholder]="'Selected date'"
              [(ngModel)]="model"
              required>
            </mdb-date-picker>
          
        
    
        
            
            import { Component, OnInit, ViewChild } from '@angular/core';
            import { IMyOptions, MDBDatePickerComponent } from 'ng-uikit-pro-standard';

            @Component({
              selector: 'date-picker-component-example',
              templateUrl: 'date-picker.component.html'
            })
            export class DatePickerComponentExample implements OnInit {
              @ViewChild('datePicker', { static: true }) datePicker!: MDBDatePickerComponent;

              myDatePickerOptions: IMyOptions = {
                // Your options
              };

              ngOnInit() {
                setTimeout(() => {
                  this.datePicker.openBtnClicked();
                  setTimeout(() => {
                    this.datePicker.closeBtnClicked();
                  }, 2000);
                }, 2000);
              }
            }

Set default date MDB Pro component

Template-driven forms:

        
            
              <mdb-date-picker name="mydate" [options]="myDatePickerOptions" [placeholder]="'Selected date'" [(ngModel)]="selectedDate"></mdb-date-picker>
            
        
    
        
            
              import { Component } from '@angular/core';
              import { IMyOptions } from 'ng-uikit-pro-standard';

              @Component({
              selector: 'date-picker-component-example',
              templateUrl: 'date-picker.component.html'
              })
              export class DatePickerComponentExample {
                myDatePickerOptions: IMyOptions = {
                  // Your options
                };

                selectedDate = {date: {year: 2019, month: 5, day: 8}};
              }

Reactive forms:

        
            
                  <mdb-date-picker [options]="myDatePickerOptions" [placeholder]="'Selected date'" formControlName="datePickerControl"></mdb-date-picker>
                
        
    
        
            
                  import { Component, OnInit } from '@angular/core';
                  import { IMyOptions } from 'ng-uikit-pro-standard';

                  @Component({
                    selector: 'date-picker-component-example',
                    templateUrl: 'date-picker.component.html'
                  })
                  export class DatePickerComponentExample implements OnInit {
                    myDatePickerOptions: IMyOptions = {
                      // Your options
                    };

                    datePickerForm: FormGroup;

                    ngOnInit() {
                      const selectedDate = {date: {year: 2019, month: 5, day: 8}};
                      this.datePickerForm = new FormGroup({
                        datePickerControl: new FormControl(selectedDate)
                      });
                    }
                  }

Using [selDate] input:

        
            
                  <mdb-date-picker name="mydate" [options]="myDatePickerOptions" [placeholder]="'Selected date'" [selDate]="'2019-05-08'"></mdb-date-picker>
                
        
    
        
            
                  import { Component } from '@angular/core';
                  import { IMyOptions } from 'ng-uikit-pro-standard';

                  @Component({
                    selector: 'date-picker-component-example',
                    templateUrl: 'date-picker.component.html'
                  })
                  export class DatePickerComponentExample {
                    myDatePickerOptions: IMyOptions = {
                      // Your options
                    };
                  }

Using JavaScript ISO string:

        
            
            <mdb-date-picker name="mydate" [options]="myDatePickerOptions" [placeholder]="'Selected date'" required></mdb-date-picker>
          
        
    
        
            
            import { Component } from '@angular/core';
            import { IMyOptions } from 'ng-uikit-pro-standard';

            @Component({
              selector: 'date-picker-component-example',
              templateUrl: 'date-picker.component.html'
            })
            export class DatePickerComponentExample {
              myDatePickerOptions: IMyOptions = {
                startDate: new Date().toISOString()
              };
            }

Using JavaScript Date object:

        
            
            <mdb-date-picker name="mydate" [options]="myDatePickerOptions" [placeholder]="'Selected date'" [(ngModel)]="date" required></mdb-date-picker>
          
        
    
        
            
            import { Component } from '@angular/core';
            import { IMyOptions } from 'ng-uikit-pro-standard';

            @Component({
              selector: 'date-picker-component-example',
              templateUrl: 'date-picker.component.html'
            })
            export class DatePickerComponentExample {
              myDatePickerOptions: IMyOptions = {};
              date = new Date();
            }

Default Date Picker

Below is presented the browser's default Date Picker with MD input.

        
            
            <div class="md-form">
              <input type="date" id="input" class="form-control" mdbInput>
              <label for="input">Choose your date</label>
            </div>

Angular Date Picker - API

In this section you will find informations about required modules and available inputs, outputs, methods and events of date picker component.

Modules used

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors. 

        
            
          import { DatepickerModule, WavesModule } from 'ng-uikit-pro-standard';
          import { FormsModule } from '@angular/forms';
Import example Modules list

Components

MdbDatePicker

Selector: mdb-date-picker

Type: MDBDatePickerComponent

Inputs

Name Type Default Description Example
defaultMonth string - If no start date value is provided, the calendar will open on date specified in this input [defaultMonth]="'05.2017'
disabled boolean false Specifies the disabled state of date picker [disabled]="true"
label string - Label text for the input element [label]="'My label'"
locale string - Specifies new language for component [locale]="'de'"
options IMyOptions - Options for date picker component that need to be specified in typescript file [options]="myDatePickerOptions"
openOnFocus boolean true Allow to prevent date picker from opening on input focus [openOnFocus]="false"
placeholder string - Specifies placeholder text for the input element [placeholder]="'Select date'"
selector number 0 Specifies wheter date picker calendar should be opened by default [selector]="1"
tabIndex number 0 Changes tabindex of the date picker input field [tabIndex]="-1"
inline boolean false Determines if Date Picker should be opened inline instead of modal [inline]="true"
inlineIcon string 'far fa-calendar-alt' Use to change the default inline date picker icon inlineIcon="fas fa-calendar-alt"
outlineInput boolean false Use to change default Date Picker to outline version (.md-outline) class [outlineInput]="true"

Outputs

Name Type Description Example
dateChanged EventEmitter<any> Event emitted when date value change (dateChanged)="onDateChange($event)"
calendarViewChanged EventEmitter<ImyCalendarViewChanged> Event emitted when calendar view change (year or month is changed) (calendarViewChanged)="onCalendarViewChange($event)"
inputFieldChanged EventEmitter<IMyInputFieldChanged> Event emitted when input value change (date is selected or date is cleared) (inputFieldChanged)="onInputFieldChange($event)"
inputFocusBlur EventEmitter<IMyInputFocusBlur> Event emitted when the input element get or lost focus (inputFocusBlur)="onInputFocusBlur($event)"
todayButtonClicked EventEmitter<MDBDatePickerComponent> Event emitted when today button is clicked (todayButtonClicked)="onTodayButtonClicked($event)"
clearButtonClicked EventEmitter<MDBDatePickerComponent> Event emitted when clear button is clicked (clearButtonClicked)="onClearButtonClicked($event)"
closeButtonClicked EventEmitter<MDBDatePickerComponent> Event emitted when close button is clicked (closeButtonClicked)="onCloseButtonClicked($event)"

Options

Name Type Default Description Example
alignSelectorRight boolean false Changes position of the date picker frame alignSelectorRight: true
ariaLabelClearDate string 'Clear Date' Aria label for the clear date button ariaLabelClearDate: 'Clear Date'
ariaLabelInputField string 'Date input field' Aria label for the input field ariaLabelInputField: 'Date input field'
ariaLabelOpenCalendar string 'Open Calendar' Aria label for the open calendar button ariaLabelOpenCalendar: 'Open Calendar'
ariaLabelNextMonth string 'Next Month' Aria label for the next month button ariaLabelNextMonth: 'Next Month'
ariaLabelNextYear string 'Next Year' Aria label for the next year button ariaLabelNextYear: 'Next Year'
ariaLabelPrevMonth string 'Previous Month' Aria label for the previous month button ariaLabelPrevMonth: 'Previous Month'
ariaLabelPrevYear string 'Previous Year' Aria label for the previous year button ariaLabelPrevYear: 'Previous Year'
ariaLabelPrevYear string 'Previous Year' Aria label for the previous year button ariaLabelPrevYear: 'Previous Year'
ariaLabelPrevYear string 'Previous Year' Aria label for the previous year button ariaLabelPrevYear: 'Previous Year'
ariaLabelPrevYear string 'Previous Year' Aria label for the previous year button ariaLabelPrevYear: 'Previous Year'
ariaLabelPrevYear string 'Previous Year' Aria label for the previous year button ariaLabelPrevYear: 'Previous Year'
closeAfterSelect boolean false Specifies wheter date picker should close after date was selected closeAfterSelect: true
componentDisabled boolean false Specifies wheter date picker is disabled componentDisabled: true
dateFormat string 'yyyy-mm-dd' Specifies date format, use same delimeters as in startDate dateFormat: 'm.d.yy'
dayLabels <IMyDayLabels>{} {su: 'Sun', mo: 'Mon', tu: 'Tue', we: 'Wed', th: 'Thu', fr: 'Fri', sa: 'Sat'} Specifies shortened names of days dayLabels: {su: 'Sun', mo: 'Mon', tu: 'Tue', we: 'Wed', th: 'Thu', fr: 'Fri', sa: 'Sat'}
dayLabelsFull <IMyDayLabels>{} {su: "Sunday", mo: "Monday", tu: "Tuesday", we: "Wednesday", th: "Thursday", fr: "Friday", sa: "Saturday"} Specifies names of days dayLabelsFull: {su: "Sunday", mo: "Monday", tu: "Tuesday", we: "Wednesday", th: "Thursday", fr: "Friday", sa: "Saturday"}
disableDateRanges <IMyDateRange>[] - Allow to disable date ranges disableDateRanges: [{begin: {year: 2015, month: 5, day: 10}, end: {year: 2017, month: 9, day: 17}}]
disableHeaderButtons boolean true Used to disable changes in calendar view when previous or next dates are disabled disableHeaderButtons: false
disableSince <IMyDate>{} { year: 0, month: 0, day: 0 } Allow to disable dates forward starting from the given date disableSince: { year: 2017, month: 8, day: 9 }
disableUntil <IMyDate>{} { year: 0, month: 0, day: 0 } Allow to disable dates backwards starting from the given date disableUntil: { year: 2018, month: 5, day: 15 }
disableWeekends boolean false Specifies wheter weekends should be disabled disableWeekends: true
enableDays <IMyDate>[] - Allow to enable given dates enableDays: [{year: 2014, month: 4, day: 7}, {year: 2018, month: 3, day: 17}]
editableDateField boolean true Specifies whether input filed is editable or not editableDateField: false
firstDayOfWeek string 'mo' Specifies first day of week on the calendar firstDayOfWeek: 'tu'
markCurrentDay boolean true Specifies wheter current day is marked in calendar markCurrentDay: false
markDates <IMyMarkedDates>[] - Allow to mark choosen dates with specified color markDates: [{dates: [{year: 2016, month: 11, day: 14}, {year: 2016, month: 12, day: 16}], color: '#004198'}]
markWeekends <ImyMarkedDate>{} - Allow to mark weekends with specified color markWeekends: {marked: true, color: 'blue'}
maxYear number 9999 Specifies maximum allowed year in calendar, cannot be more than 9999 maxYear: 2020
minYear number 1000 Specifies minimum allowed year in calendar, cannot be less than 1000 minYear: 2000
monthLabels <IMyMonthLabels>{} { 1: 'Jan', 2: 'Feb', 3: 'Mar', 4: 'Apr', 5: 'May', 6: 'Jun', 7: 'Jul', 8: 'Aug', 9: 'Sep', 10: 'Oct', 11: 'Nov', 12: 'Dec' } Specifies shortened names of months monthLabels: { 1: 'Jan', 2: 'Feb', 3: 'Mar', 4: 'Apr', 5: 'May', 6: 'Jun', 7: 'Jul', 8: 'Aug', 9: 'Sep', 10: 'Oct', 11: 'Nov', 12: 'Dec' }
monthLabelsFull <IMyMonthLabels>{} { 1: "January", 2: "February", 3: "March", 4: "April", 5: "May", 6: "June", 7: "July", 8: "August", 9: "September", 10: "October", 11: "November", 12: "December" } Specifies names of months monthLabelsFull: { 1: "January", 2: "February", 3: "March", 4: "April", 5: "May", 6: "June", 7: "July", 8: "August", 9: "September", 10: "October", 11: "November", 12: "December" }
showClearDateBtn boolean true Specifies wheter clear date button is visible showClearDateBtn: false
showTodayBtn boolean true Specifies wheter today button is visible showTodayBtn: false
showWeekNumbers boolean false Allow to display week number, works only if firstDayOfWeek = 'mo' showWeekNumbers: true
startDate string - Specified default date value, use same delimeters as in dateFormat startDate: '2016-05-05'
todayBtnTxt string 'Today' Allow to add custom text for today button todayBtnText: 'Today'
useDateObject boolean false Specifies whether date picker control should return date in Javascript date object format useDateObject: true

Methods

You can get access to date picker methods from another component. Add template reference variable to your mdb-date-picker component in HTML file

<mdb-date-picker #datePicker></mdb-date-picker>

Then in your typescript file use @ViewChild decorator to get access to MDBDatePickerComponent methods

@ViewChild('datePicker', { static: true }) datePicker: MDBDatePickerComponent

MDBDatePickerComponent
Name Description Example
openBtnClicked Opens date picker this.datePicker.openBtnClicked()
closeBtnClicked Closes date picker this.datePicker.closeBtnClicked()
toggleInlineDatePicker Toggle the inline date picker - visible / hidden this.datePicker.toggleInlineDatePicker()
LocaleService
Name Description Example
setLocaleOptions(locale: IMyLocales) Set the global Date Picker locale from provided parameter. this.localeService.setLocaleOptions(locale)
getLocaleOptions(locale: string) Returns locale which corresponds to provided locale identifier (eg. 'de'), or default 'en' when no such locale found. console.log(this.localeService.getLocaleOptions('de'))