Angular Bootstrap date picker MDB Pro component

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

Examples

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:

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

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'