Refreshing ion-datetime parameters


#1

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 ?


#2

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


#3

@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.


#4

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?


#5

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?


#6

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.


#7

I did a plunker to show you.


#8

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


#9

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.


DateTime - monthShortNames not working when it's on the first page the app loads
#10

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


#11

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


#12

@Al1_andre thx for the reply