Set format-independent date value to mdb-date-picker

Dear @zoloterra

As I understand your problem, you want to set only one date (for example, {day: 15, month: 08, year: 2018}), and you want to parse it in accordance to selected translation (for example, for en: dd/mm/yyyy, ru: dd.mm.yyyy) right?

If yes, there's no such possibility, unfortunately.

We've got in our developer plans to modify the Date Picker, to be able to use the JS date instead of string date. With JS date your desired behavior would be achieved without problems.

But for now, there's no such possibility, and I'm not able to provide you with any workaround for this situation.

Best Regards,

Damian

Dear @zoloterra

I'm not sure if I understood your problem well.

Could you please provide me with the code which you're using (both HTML markup and TS logic)? It would help me to debug your problem, and point you the best working solution.

Best Regards,

Damian

Here is a piece of HTML:

<div class="md-form col-6" *ngIf="form.get('date')">
  <mdb-date-picker #dateDatePicker 
    formControlName="date" 
    label="Дата урока" 
    [locale]="localization.currentLocale">
  </mdb-date-picker>   
</div>

and here is the TS code:

private dateDatePicker: MDBDatePickerComponent;
@ViewChild('dateDatePicker') set dateDatePickerSetter(datePicker: MDBDatePickerComponent) {
  if (datePicker) {
    this.dateDatePicker = datePicker;

    this.dateDatePicker.addLocale({      
      ru: DateUtils.ruDatePickerOptions,
      en: DateUtils.enDatePickerOptions,
      bg: DateUtils.ruDatePickerOptions
    });

    setTimeout(() => {
      const dateFormControl = <FormControl>this.form.get('date');
      dateFormControl.setValue(dateFormControl.value);
    });          
  }    
}

and finally here is how the the Reactive FormControl value is set:

value = DateUtils.toShortDate(new Date(), this.localization.currentLocale);
formControl = new FormControl(value);

So the FormControl value for the DatePicker depends on current locale.

If you set locale the DatePicker it starts to understand the date value ONLY if it is formatted in accordance with the current locale:

• — if locale is 'en', you have to set DatePicker value as 12/31/2018 string
• — if locale is 'ru', you have to set DatePicker value as 31.12.2018 string

otherwize if, for example, you set the value in the ISO Date Format as 2018-12-31 or just as Javascript date, the DatePicker shows somthening like 1-1-1-0-1-1

So my question is — how to set DatePicker value not being tight with the current locale?

Later, I will have a task to switch my locales at runtime and if your datapicker operates only in the locale date formats, then I have to subscribe to the locale change, remove the value in old locale and add value in new locale... I can do it, but it is excessive and verbose..

Is there more elegant way to accomplish the runtime locale switch?