Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


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

zoloterra free asked 5 years ago


Hello,

The setting of mdb-date-picker value in Reactive Forms depends on the locale (isn't it?).

If you set the locale to en, you should set the date to FormControl as 12/31/2018, but if the locale is ru, you should set the date as 31.12.2018.

Is there a universal and locale-independant date format that can be used to set the FormControl value?

The following is the use case with the problem beacuse of that date-format-dependency.

I use the mdb-date-picker to show dated for difference locales in Reactive Forms. Besides that my mdb-date-picker is shown conditionally with *ngIf. Once the mdb-date-picker is out of the DOM, @ViewChild doesn't see it and the addLocale() cannot be called, but the locales can be added once the the mdb-date-picker is added to the DOM with @ViewChild setter, there is no problem.

The problem appears when I want to set a value to the FormControl that is assosicated with the mdb-date-picker. The order of actions is the following:

  1. adding FromControl and setting the value in locale format,
  2. appearance of the mdb-date-picker in the DOM and parsing the date,
  3. addind locales

Bacause locales are added after the parsing the date looks ugly.

I have a workaround — adding the value by setTimeout(), but that is awfully.

I would prefer that I could set the date without any connection with the locale and format, like others datepickers do, for example: {year: 2018, month: 12, day: 31}

Is there any kind of a good solution?


Damian Gemza staff answered 5 years ago


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


zoloterra free answered 5 years ago


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?


Damian Gemza staff answered 5 years ago


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



Please insert min. 20 characters.

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: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.5.0
  • Device: Any
  • Browser: Any
  • OS: Any
  • Provided sample code: Yes
  • Provided link: No