Internationalized date format

1

Hi,

I have the following issue: I want to format a date according to the langauge settings of the OS. Currently, I use the following date format mechanism:

<div class="col">
    {{request.time | date:'dd.MM.yyyy HH:mm'}} 
</div>

In this case, the formatting is static. Now I want to apply a language dependent formatting. Such as:

<div class="col">
    {{request.time | date:smallDate}} 
</div>

And depending on the language setting, the date is formatted as “dd.MM.yyyy HH:mm” or when the language is set to english “yyyy/MM/dd HH:mm” etc.

Is there a way to apply a date format rule that considers the language settings of the OS?

Regards,

Mike

2

Hello,

I’ve got the same problem. Did you find a clean way to solve it?.

AFAIK you can localize AngularJS by including the corresponding JS locale file (see https://docs.angularjs.org/guide/i18n). Actually, the $locale service will return the ID of the locale file included and the dates will be formatted using it, but it won’t follow the OS locale settings.

I guess you could create your own Angular service to change the Angular locale dynamically (using an external lib, like the ones discussed in this old thread, or reloading the page including the right locale JS file) and using the Cordova globalization plugin to fetch the OS locale configuration, but I’m surprised this feature isn’t already provided (at least I couldn’t find an easy implementation).

Additionally I read there are other external libraries which support localized date formatting, such as i18n-js which can be integrated with Angular.
I’m also surprised I couldn’t find this feature in angular-translate (my mistake?).

Please, correct me if anything above is inaccurate.
Can anyone else clarify the current status of this topic?.

Thanks in advance.
Regards,
Rafael.

3

Nobody gives advise?

4

Hey There! So internationalization isn’t much of an ionic issue, but more of and general angular issue. That being said, questions like this would probably get more attention on StackOverflow.

That being said, I found some resources that could help.

https://docs.angularjs.org/guide/i18n


5

Thanks for the pointers!

6

If index.html is served by server, then it’s easy to include the appropriate i18n script.
But how to include the script conditionally if everything runs on client only?

From angular docs:
<html ng-app>
 <head>
….
   <script src="angular.js"></script>
   <script src="i18n/angular-locale_de-de.js"></script>
….
 </head>
</html>
7

Take a look at this

8

I might have misunderstood your answer, butmy question is not related to angular-translate, I would like angular to format date and time and to achieve this, appropriate locale needs to be loaded - the snippet above (https://docs.angularjs.org/guide/i18n). On top of that, I would like to use angular-gettext instead.

9

If you just need to load the local time and date, you can use

<input type="datetime-local">

But it’s only supported on safari right now

http://www.w3schools.com/tags/att_input_type.asp

10

Oh, we don’t understand each other :slight_smile:

Input: 1977-06-03
Output:
English - June 3, 1977 
Spanish - 3 de junio de 1977

To achieve this I need to load appropriate Angular script (see above) and have no idea how to do it when index.html is not handled by server.

11

AHH alright I get it now hah.

Check out this awesome video :smile:
Seems pretty straight forward

Actually pretty interesting video

12

Hello together!

Somebody an idea about the date and time inputs? I bind these using ng-model an got some problems:
1st: Date format displayed is not in correct locale format (no different if user selected or manually assigned from storage)
2nd: Time selector (Android) shows AM/PM instead of 24hr format, after selection it’s then correct, e.g. 16:55
3rd: when setting the model value from storage on time inputs, if seconds/milliseconds aren’t set to 0 it shows nothing, and it shows xx:xx:00.000 if they are 0 instead of just xx:xx
4th: Android: Date/Time selectors show “Clear” instead of the german value, iPhone shows “Done” and i mean too “Clear” instead of the german values.

Any ideas, suggestions, tips, tricks? I guess, this is somewhere deep in Angular.JS which I’m new to since I’m using Ionic…

Thank you very much for any help!

Regards