Rate this docs

Angular Bootstrap date picker

Angular Date Picker - Bootstrap 4 & Material Design

Angular Bootstrap date picker is a component which allow 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 {
        public 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 {
        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: {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'
        };
        }
      

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 {
        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, 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') datePicker: MDBDatePickerComponent;

public myDatePickerOptions: IMyOptions = {};

ngOnInit() {
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,
}
});
}
}

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.

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'

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"
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"

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)"

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}]
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'
todayBtnText string 'Today' Allow to add custom text for today button todayBtnText: 'Today'