en-GB and en-US locales now use 12 hour format

[harogaston]

Original "HH:mm" (23:59) -> Now "hh:mm aa" (11:59 p.m.)

Before submitting a pull request, please make sure you have at least performed the following:

• read and followed the CONTRIBUTING.md guide.
• linted, built and tested the changes locally.
• added/updated any applicable API documentation.
• added/updated any applicable demos.

[edcarroll]

Just want to hold off on this one until the 12:00 display is sorted for consistency, hope that's ok :)

[harogaston]

Sorry, I did not get what you mean. Nevertheless I'm sure you are right. But I'm curious.

[edcarroll]

Sorry for the delay on getting an answer to what I mean!

So the issue with using aa and its siblings is the fact that they currently aren't correctly mapped to date-fns. If you look at the code that converts the locale values months, monthsShort e.t.c, it doesn't have any logic for converting time values.

Can you please add this in? Take a look at the date-fns locales for an example of how they encode the values

[harogaston]

I'm sorry but I don't get your point. Can you give me an example of what doesn't work?

date-fns locales have this:

  var timeOfDayValues = {
    uppercase: ['AM', 'PM'],
    lowercase: ['am', 'pm'],
    long: ['a.m.', 'p.m.']
  }

  var localize = {
    ordinalNumber: ordinalNumber,
    weekday: buildLocalizeFn(weekdayValues, 'long'),
    weekdays: buildLocalizeArrayFn(weekdayValues, 'long'),
    month: buildLocalizeFn(monthValues, 'long'),
    months: buildLocalizeArrayFn(monthValues, 'long'),
    timeOfDay: buildLocalizeFn(timeOfDayValues, 'long', function (hours) {
      return (hours / 12) >= 1 ? 1 : 0
    }),
    timesOfDay: buildLocalizeArrayFn(timeOfDayValues, 'long')
  }

Is that timeOfDay what you are talking about?

[edcarroll]

Exactly - at the moment, ng2-semantic-ui takes the locale values, transforms them with custom versions of those functions (buildLocalizeFn , e.t.c.) and outputs a locale that date-fns understands.

At the moment, that doesn't include timeOfDayValues - so if someone wants to use it in a country that doesn't use PM, but instead GI (for the sake of this example), they can't currently just use aa.

Does that make sense?

[harogaston]

Oh I see your point now. Sorry it took me a while. I'll try something during the weekend. Sorry about the repeated request for clarification.

[edcarroll]

No worries 😄 should be a quick one I hope, as I think you'll be able to reuse the functions in datepicker/helpers/date-fns.ts.

[edcarroll]

Ah also - when you've put a solution in place, please ping the various locale creators so they know to update their translations with the correct am-pm values (or steal them from date-fns 😉)

[harogaston]

@edcarroll Do you what to have all the alternatives that date-fns has [uppercase|lowercase|long] or just one that maps to all three?

var timeOfDayValues = {
  uppercase: ['AM', 'PM'],
  lowercase: ['am', 'pm'],
  long: ['a.m.', 'p.m.']
};

[edcarroll]

@harogaston let's go for all three, I feel clarity is better here

[edcarroll]

Awesome! Couple of final things before we get this merged (v small things tho)

[edcarroll]

Does this invalidate the need for the other PR?

[edcarroll]

Wait I'm an idiot ignore me

[edcarroll]

Could you put each arg on its own line please? Leave a space before the 1st statement in the function also when breaking like this

[harogaston]

Working on it

[edcarroll]

Final thing regarding all of your commits, please make sure you are following the commit message style in the contribution guidelines - i.e. feat(datepicker): Added support for 12 hour locales

[harogaston]

For better results it should be tested against feat(datepicker) Popup now honors locale and pickerLocaleOverrides but it works independently as well.

For now only two values for timeOfDay are supported, something like ["in the morning", "in the afternoon", "in the evening"] could be added later. it won't work just now because I think localization.service.ts:deepClone() and/or localization.service.ts:deepExtend do not work well with function objects which will be needed in locale definitions.

[edcarroll]

@harogaston have just merged that PR, do you want to pull master into this branch and do a quick test?

No worries re only 2 values - does date-fns support more than 2?

[harogaston]

Final thing regarding all of your commits, please make sure you are following the commit message style in the contribution guidelines - i.e. feat(datepicker): Added support for 12 hour locales

Sorry about that. I also have a few other similar questions. I'll talk to you via gitter later.

[edcarroll]

Don't forgot to mark the review comments as done to close them 😄

[harogaston]

@harogaston have just merged that PR, do you want to pull master into this branch and do a quick test?

I have tested it including those changes already.
I can still pull master if you want and do the merge.

No worries re only 2 values - does date-fns support more than 2?

Yes they allow things like:

var timeOfDayValues = {
  uppercase: ['AM', 'PM'],
  lowercase: ['am', 'pm'],
  long: ['du matin', 'de l’après-midi', 'du soir']
};

But for that to work locales will have to provide their own parsing functions.

[harogaston]

Don't forgot to mark the review comments as done to close them 😄

I don't know how to...

[edcarroll]

Hmm thought there was a button but may be mistaken. Oh well! Happy to approve this 🎉

[edcarroll]

Ahh ok let's leave the further customisation as a future feature 😄