Angular Date Picker - Bootstrap 4 & Material Design

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

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

        @Component({
          selector: 'date-picker-inline-component-example',
          templateUrl: 'date-picker-inline.component.html'
        })

        export class DatePickerInlineComponentExample {
          public myDatePickerOptions: IMyOptions = {
            // Your options
          };
        }
      

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

import { IMyOptions, MDBDatePickerComponent, LocaleService } 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 = {};

    public locales = {
      '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,
      }
    };
    constructor(private localeService: LocaleService) {
      this.localeService.setLocaleOptions(this.locales);
    }
}

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

          selectedDate = {date: {year: 2019, month: 5, day: 8}};
          }
        

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

              @Component({
              selector: 'date-picker-component-example',
              templateUrl: 'date-picker.component.html'
              })

              export class DatePickerComponentExample implements OnInit {
              public myDatePickerOptions: IMyOptions = {
              // Your options
              };

              datePickerForm: FormGroup;

              ngOnInit() {
                const selectedDate = {date: {year: 2019, month: 5, day: 8}};
                this.datePickerForm = new FormGroup({
                  datePickerControl: new FormControl(selectedDate)
                });
              }
              }
            

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

              }
            

        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 = {
            startDate: new Date().toISOString()
          };
        }