Refreshing ion-datetime parameters

Hi there, I’m using ion-datetime with some parameters setted in different languages, and I’d like to be able to refresh it when language is launched. I couldn’t find how to do in the doc.

My HTML :

<ion-datetime 
      displayFormat="{{'DATETIME.MOMENT_FORMAT' | translate}}" 
      pickerFormat="{{'DATETIME.MOMENT_FORMAT' | translate}}" 
      [monthNames]="monthNames"
      [monthShortNames]="monthShortNames"
      [dayNames]="dayNames"
      [dayShortNames]="dayShortNames"
      cancelText="{{'DATETIME.CANCEL' | translate}}"
      doneText="{{'DATETIME.DONE' | translate}}"
      min="{{today}}"
      [(ngModel)]="tastingObject.meeting_time" ></ion-datetime>

And the TS :

    translateService.get('DATETIME.DAYNAMES').subscribe( value => { self.dayNames = value; } );
    translateService.get('DATETIME.DAYSHORTNAMES').subscribe( value => { self.dayShortNames = value; } );
    translateService.get('DATETIME.MONTHNAMES').subscribe( value => { self.monthNames = value; } );
    translateService.get('DATETIME.MONTHSHORTNAMES').subscribe( value => { self.monthShortNames = value; } );

The first page always use the default ion-datetime configuration as the language is not yet loaded (.subscribe() thing), so I’d like to refresh it when the page is loaded (viewCtrl.didEnter), any idea ?

If you want to load something when a page is loaded, you could use the ionViewDidLoad() event.

@luukschoen thank you for the function.

What I’m actually looking for, is a way to refresh the ion-datetime. Something like MyIonDatetime.refresh() that will use the new values of the object parameters.

Hmm okay. Rebinding the value of the datetime doesn’t provide the functionality you’re looking for? Perhaps you can recreate the instance of the ion-datetime instead of updating it, although it seems a little bit harsh.

How does the language get changed and what do you expect to change exactly?

Something unusual is going on here. Angular’s change detection is supposed to deal with automatically reflecting changes to bound properties in the template. Is there a complete repo somewhere that people can clone to reproduce this?

1 Like

I did a plunker of the code. Angular detects the changes as you can see in the home page. But the values are passed through the DOM and ion-datetime does not refresh itself when DOM is updated.

I did a plunker to show you.

What are we supposed to be looking for? How do I change the language or do whatever causes the problem?

You cannot change the language in this plunker, but it is not needed as it reproduces the problem.

The problem

ion-datetime keep the default values, and do not show French days, month etc.

What you can see on the render

1 - The months in French are printed under the line Month name when page is loaded, they are seen only after the i18 file is loaded (This is normal)
2 - The ion-datetime shows months, days in English before the i18 file is loaded (This is normal)
3 - The ion-datetime stays in English after the i18 file is loaded (The problem)

I hope it is clearer.

Hi @Al1_andre same problem here, have you solve this issue ?

Hi @jeba unfortunately not.
I have changed the main frame to let the datetime charge in background.

Cordialement,

Alain ANDRÉ
www.alain-andre.fr
+33 637 700 504

@Al1_andre thx for the reply