DatePicker and Select Problems

Topic: DatePicker and Select Problems

Geo Statie pro asked 3 years ago

Hi! After the update on 8.7.0 I have problems with the datepicker inside a reactive form. when I load the page, it looks like in the photo attached. The problem has something to do with setting 'locale' on the datepicker.

enter image description here

After changing the locale, it looks like this:

enter image description here

<mdb-date-picker #fromDatePicker formControlName="fromDate" [inline]="true" [label]="'Filter.FromDate' | translate" [locale]="userCulture"></mdb-date-picker>

I have another problem with the 'select' control used with a template-driven form. After the last update, 'x' button is visible although I didn't select anything.

[(ngModel)]="selectedOrderStatusId" [ngModelOptions]="{standalone: true}" (ngModelChange)="orderStatusSelected($event)" [allowClear]="true"

enter image description here

Bartosz Termena staff answered 3 years ago

Dear @Geo Statie

I need more info about first problem, because i can not reproduce it, here is my example:

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <form [formGroup]="datePickerForm">
          [placeholder]="'Selected date'"


 public myDatePickerOptions: IMyOptions = {
    // Your options
  userCulture = 'de';
  datePickerForm: any;
  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) {
  ngOnInit() {
    const selectedDate = { date: { year: 2019, month: 5, day: 8 } };
    this.datePickerForm = new FormGroup({
      datePickerControl: new FormControl(selectedDate),
    setTimeout(() => {
      this.userCulture = 'en';
    }, 2500);

Everything seems to work fine (with programmatic change userCulture).

About select - yes you are right, this problem occurs, we will take a closer look at that.

Best Regards, Bartosz.

Geo Statie pro commented 3 years ago

please don't provide default selected date in your code. the datepicker should not have an initial value.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.7.0
  • Device: All
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No