Angular Bootstrap date picker MDB Pro component

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

Examples

Options usage

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

List of available options

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

Inputs

Outputs

// For MDB Angular Pro
import { DatepickerModule, WavesModule } from 'ng-uikit-pro-standard'

// For MDB Angular Pro
import { FormsModule } from '@angular/forms'