DatePicker and Select Problems

Topic: DatePicker and Select Problems

Geo Statie pro asked 5 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

Add comment

Bartosz Termena staff answered 5 years ago

0 0 Best answer

<p>Dear <a href="/profile/?id=71225" target="_blank" rel="nofollow">@Geo Statie</a></p>

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

<pre class="prettyprint"><code> 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);
  }
</code></pre>

<p>Everything seems to work fine (with programmatic change userCulture).</p>

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

<p>Best Regards, Bartosz.</p>

Please insert min. 20 characters.

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>

 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 5 years ago

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: 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

Geo Statie

Pro User 78Support score
6Questions 4Answers 0Snippets