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 'your_path_to/date-picker/index';

@Component({
    selector: 'date-picker-component-example', 
    templateUrl: 'toast.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 'your_path_to/date-picker/index'; 

@Component({ 
    selector: 'date-picker-component-example', 
    templateUrl: 'toast.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 'your_path_to/date-picker/index'; 

@Component({ 
    selector: 'date-picker-component-example', 
    templateUrl: 'toast.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 'your_path_to/date-picker/index'; 

@Component({ 
    selector: 'date-picker-component-example', 
    templateUrl: 'toast.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 'your_path_to/date-picker/index'; 

@Component({ 
    selector: 'date-picker-component-example', 
    templateUrl: 'toast.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 'your_path_to/date-picker/index'; 

@Component({ 
    selector: 'date-picker-component-example', 
    templateUrl: 'toast.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 'your_path_to/date-picker/index'; 

@Component({ 
    selector: 'date-picker-component-example', 
    templateUrl: 'toast.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 'your_path_to/date-picker/index'; 

@Component({ 
    selector: 'date-picker-component-example', 
    templateUrl: 'toast.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 'your_path_to/date-picker/index'; 

@Component({ 
    selector: 'date-picker-component-example', 
    templateUrl: 'toast.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_path_to/pro/date-picker/services/datepickerLocaleService.ts or add your custom option to quick access.

Example


<div class="container"> 
    <div class="row"> 
        <div class="col-md-12"> 
            <form #myForm="ngForm" novalidate>
                <mdb-date-picker name="mydate" [options]="myDatePickerOptions" [placeholder]="'Selected date'" [(ngModel)]="model" [locale]="'de'" required></mdb-date-picker>
            </form> 
        </div> 
    </div> 
</div>                             
                            
import { Injectable } from "@angular/core";
import { IMyLocales, IMyOptions } from "../interfaces/index";

@Injectable()
export class LocaleService {
    private locales: IMyLocales = {
        "en": {
            dayLabelsFull: {su: "Sunday", mo: "Monday", tu: "Tuesday", we: "Wednesday", th: "Thursday", fr: "Friday", sa: "Saturday"},
            dayLabels: {su: "Sun", mo: "Mon", tu: "Tue", we: "Wed", th: "Thu", fr: "Fri", sa: "Sat"},
            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" },
            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" },
            dateFormat: "yyyy-mm-dd",
            todayBtnTxt: "Today",
            clearBtnTxt: "Clear",
            closeBtnTxt: "Close",
            firstDayOfWeek: "mo",
            sunHighlight: false,
        },
        "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,
        }
    };

    getLocaleOptions(locale: string): IMyOptions {
        if (locale && this.locales.hasOwnProperty(locale)) {
            // User given locale
            return this.locales[locale];
        }
        // Default: en
        return this.locales["en"];
    }
}