Angular Bootstrap date picker MDB Pro component

The mobile-friendly, responsive and beautiful Date Picker with a ton of options.


Examples


<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 {
    public myDatePickerOptions: IMyOptions = {
        // Your options
    };
}
  

Options

With the basic invocation above, these are the default settings:


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 { 
    public 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: undefined,
        disableSince: undefined,
        disableDays: undefined,
        disableDateRanges: undefined,
        disableWeekends: false,

        // Enable dates (when disabled)
        enableDays: undefined,

        // Year limits
        minYear: 1000, 
        maxYear: 9999,

        // Show Today button
        showTodayBtn: true,

        //Show Clear date button
        showClearDateBtn: true,

        markCurrentDay: true,
        markDates: undefined,
        markWeekends: undefined,
        disableHeaderButtons: false,
        showWeekNumbers: false,
        height: '100px',
        width: '50%',
        selectionTxtFontSize: '15px'
    }; 
}
      

Variations

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 { 
    public 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 { 
    public 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 { 
    public 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 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 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 { 
    public 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 { 
    public 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 { 
    public 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 { 
    public 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

You can add your own translation in your component which holds Date Picker Component.

Example


<mdb-date-picker name="mydate" #datePicker [options]="myDatePickerOptions" [placeholder]="'Selected date'" [locale]="'de'" [(ngModel)]="model" required></mdb-date-picker>
	

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

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

  public myDatePickerOptions: IMyOptions = {};

  ngAfterViewInit() {
    this.datePicker.addLocale({
      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,
      }
    });
  }
}
    

API Reference:

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.

API Reference for MDB Angular Datepicker:
// For MDB Angular Pro
import { DatepickerModule, WavesModule } from 'ng-uikit-pro-standard'
// For MDB Angular Pro
import { FormsModule } from '@angular/forms'