Aller-Couleur / handlebars-i18n

handlebars-i18next.js adds the internationalization features of i18next and Intl to handlebars.js
Other
16 stars 6 forks source link

Different date format's per language #4

Closed MickL closed 3 years ago

MickL commented 3 years ago

Is it possible to define multiple date formats per language? For example:

DE date: 11.12.2020 date with time: 11.12.2020 15:55 Uhr

EN date: 12/11/2020 date full: 12/11/2020 15.55h

fwalzel commented 3 years ago

If it is for an occasional use only, you could define a generic preset per language with date only, like so:

HandlebarsI18n.configure([
   ['en', 'DateTimeFormat', { year:'numeric', month:2-digit', day:'2-digit'}],
   ['de', 'DateTimeFormat', { year:'numeric', month:2-digit', day:'2-digit'}]
]);

This would result in 11.12.2020 for 'de' when doing {{_date myDate}}. Then overide it in the specific template case with:

{{_date myDate year="numeric" month="2-digit" day="2-digit" }}

This would result in 11.12.2020 15:55.

So, yes, it is possible. But the answer is no, if you ask for a separate method 'date_full' or such. I would have to create one.

If you need the hours not in American 'AM' / 'PM' format but in 24-hour display you could go to 'en-GB' instead of 'en' in the configuration. If you need the 'Uhr' or 'h' at the end, you could suffix it manually {{#if (localeIs 'en-GB'}} h {{else}} Uhr {{/if}}. That is not too elegant, but there in no method yet to configure fully individual date formats.

MickL commented 3 years ago

Maybe it would be cool to be able to define multiple dateformats in the configuration and use them like

{{ _date variable format="short1"}} {{ _date variable format="short2"}} {{ _date variable format="long"}}

Btw did you see my PR?

fwalzel commented 3 years ago

Good idea, I will work it out. I am reviewing your pull request at the very moment :)

fwalzel commented 3 years ago

I finished your proposed feature (including new tests) in the new branch "multipleConfigurations".

You can do like so:

HandlebarsI18n.configure([
   ['en', 'DateTimeFormat', { year: 'numeric', month: '2-digit' }], // standard configuration
   ['en', 'DateTimeFormat', { year: 'numeric'}, "year-only"] // your custom configuration
]);

… then call with: {{ _date variable format="year-only"}}

This works and is tested for all types: _date, _num, and _price.

I haven't merged back into the master cause I still need to update the readme and the examples. At the moment Travis errors for some strange npm credential problem, will fix this.

MickL commented 3 years ago

Very cool! I will try it out today and give you feedback :)

Btw. doesnt it make sense to use the Unicode strings to define formats? Like "DD.MM.yyyy" https://date-fns.org/v2.16.1/docs/format

I see handlebars-i18n is using Intl but this is kind of limited, e.g. the german time format "14:42 Uhr" is not possible only "14:42".

MickL commented 3 years ago

Tested and works good!

fwalzel commented 3 years ago

Version 1.1.0 has the feature now.