DatePicker and Select Problems


Topic: DatePicker and Select Problems

Geo Statie pro asked a year 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 a year 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">
        <mdb-date-picker
          [inline]="true"
          name="mydate"
          [locale]="userCulture"
          [options]="myDatePickerOptions"
          [placeholder]="'Selected date'"
          formControlName="datePickerControl"
          required
        ></mdb-date-picker>
      </form>
    </div>
  </div>
</div>

TS

 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) {
    this.localeService.setLocaleOptions(this.locales);
  }
  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 a year ago

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


Please insert min. 20 characters.
Status

Answered

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