Time of day values supported in locale definitions (edcarroll#214)

* en-GB and en-US locales now use 12 hour format Original "HH:mm" (23:59) -> Now "hh:mm aa" (11:59 p.m.) * Fix locales Russian, Italian and Hebrew now extend from ILocaleValues. * Added new IDatepickerFormatsLocaleValues fields: - timesOfDay - timesOfDayUppercase - timesOfDayLowercase to support proper formatting/parsing of dates in datepicker. Updated Localization page * Fixing code formatting
gotenxds · Aug 15, 2017 · 9a49384 · 9a49384
1 parent 13e361c
commit 9a49384
Show file tree

Hide file tree

Showing 8 changed files with 57 additions and 15 deletions.
diff --git a/demo/src/app/pages/behaviors/localization/localization.page.ts b/demo/src/app/pages/behaviors/localization/localization.page.ts
@@ -150,6 +150,9 @@ interface ILocaleValues {
         weekdays:string[], // Full day names
         weekdaysShort:string[], // Short day names (3 letters)
         weekdaysNarrow:string[], // Narrow day names (1/2 letters)
+        timesOfDay:string[]; // Full time of day names (2 values only)
+        timesOfDayUppercase:string[]; // Short uppercase time of day names (2 values only)
+        timesOfDayLowercase:string[]; // Short lowercase time of day names (2 values only)
         formats: {
             time:string, // Date display format for 'time' mode
             datetime:string, // Display format for 'datetime' mode

diff --git a/src/behaviors/localization/interfaces/datepicker-values.ts b/src/behaviors/localization/interfaces/datepicker-values.ts
@@ -1,5 +1,6 @@
 export type Septuple<T> = [T, T, T, T, T, T, T];
 export type Duodecuple<T> = [T, T, T, T, T, T, T, T, T, T, T, T];
+export type Pair<T> = [T, T];
 
 export interface IDatepickerFormatsLocaleValues {
     year:string;
@@ -15,6 +16,9 @@ export interface IDatepickerLocaleValues {
     weekdays:Septuple<string>;
     weekdaysShort:Septuple<string>;
     weekdaysNarrow:Septuple<string>;
+    timesOfDay:Pair<string>;
+    timesOfDayUppercase:Pair<string>;
+    timesOfDayLowercase:Pair<string>;
     firstDayOfWeek:number;
     formats:IDatepickerFormatsLocaleValues;
 }
diff --git a/src/behaviors/localization/locales/en-GB.ts b/src/behaviors/localization/locales/en-GB.ts
@@ -1,4 +1,3 @@
-
 import { ILocaleValues } from "../interfaces/values";
 
 const enGB:ILocaleValues = {
@@ -18,9 +17,18 @@ const enGB:ILocaleValues = {
         weekdaysNarrow: [
             "S", "M", "T", "W", "T", "F", "S"
         ],
+        timesOfDay: [
+            "a.m.", "p.m."
+        ],
+        timesOfDayUppercase: [
+            "AM", "PM"
+        ],
+        timesOfDayLowercase: [
+            "am", "pm"
+        ],
         formats: {
-            time: "HH:mm",
-            datetime: "D MMMM YYYY HH:mm",
+            time: "hh:mm aa",
+            datetime: "D MMMM YYYY hh:mm aa",
             date: "D MMMM YYYY",
             month: "MMMM YYYY",
             year: "YYYY"

diff --git a/src/behaviors/localization/locales/en-US.ts b/src/behaviors/localization/locales/en-US.ts
@@ -4,8 +4,8 @@ const enUS:IPartialLocaleValues = {
     datepicker: {
         firstDayOfWeek: 0,
         formats: {
-            time: "HH:mm",
-            datetime: "MMMM D, YYYY HH:mm",
+            time: "hh:mm aa",
+            datetime: "MMMM D, YYYY hh:mm aa",
             date: "MMMM D, YYYY",
             month: "MMMM YYYY",
             year: "YYYY"

diff --git a/src/behaviors/localization/locales/he.ts b/src/behaviors/localization/locales/he.ts
@@ -2,9 +2,9 @@
  * locale : Hebrew (he)
  * author : David limkys : https://github.com/gotenxds
  */
-import { ILocaleValues } from "../interfaces/values";
+import { IPartialLocaleValues } from "../interfaces/values";
 
-const he:ILocaleValues = {
+const he:IPartialLocaleValues = {
     datepicker: {
         months: [
             "ינואר", "פבואר", "מרץ", "אפריל", "מאי", "יוני", "יולי", "אוגוסט", "ספטמבר", "אוקטובר", "נובמבר", "דצמבר"

diff --git a/src/behaviors/localization/locales/it.ts b/src/behaviors/localization/locales/it.ts
@@ -3,9 +3,9 @@
  * author : Massimo Costa : https://github.com/mcosta74
  */
 
-import { ILocaleValues } from "../interfaces/values";
+import { IPartialLocaleValues } from "../interfaces/values";
 
-const it:ILocaleValues = {
+const it:IPartialLocaleValues = {
     datepicker: {
         months: [
             "Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"

diff --git a/src/behaviors/localization/locales/ru.ts b/src/behaviors/localization/locales/ru.ts
@@ -1,11 +1,11 @@
-import { ILocaleValues } from "../interfaces/values";
+import { IPartialLocaleValues } from "../interfaces/values";
 
 /**
  * locale : Russian (ru)
  * author : Maksim Moiseikin : https://github.com/maksim-m
  */
 
-const ru:ILocaleValues = {
+const ru:IPartialLocaleValues = {
     datepicker: {
         months: [
             "Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"

diff --git a/src/modules/datepicker/helpers/date-fns.ts b/src/modules/datepicker/helpers/date-fns.ts
@@ -13,20 +13,30 @@ interface IDateFnsCustomLocale {
         weekdays:DateFnsHelper<IDateFnsHelperOptions, string[]>;
         month:DateFnsHelper<number, string>;
         months:DateFnsHelper<IDateFnsHelperOptions, string[]>;
+        timeOfDay:DateFnsHelper<number, string>;
+        timesOfDay:DateFnsHelper<IDateFnsHelperOptions, string[]>;
     };
     match:{
         weekdays:DateFnsHelper<string, RegExpMatchArray | null>;
         weekday?:DateFnsHelper<RegExpMatchArray, number>;
         months:DateFnsHelper<string, RegExpMatchArray | null>;
         month?:DateFnsHelper<RegExpMatchArray, number>;
+        timesOfDay:DateFnsHelper<string, RegExpMatchArray | null>;
+        timeOfDay?:DateFnsHelper<RegExpMatchArray, number>;
     };
     options?:{
         weekStartsOn?:number;
     };
 }
 
-function buildLocalizeFn(values:IDateFnsLocaleValues, defaultType:string):DateFnsHelper<number, string> {
-    return (dirtyIndex, { type } = { type: defaultType }) => values[type][dirtyIndex];
+function buildLocalizeFn(values:IDateFnsLocaleValues,
+                         defaultType:string,
+                         indexCallback?:(oldIndex:number) => number):DateFnsHelper<number, string> {
+
+    return (dirtyIndex:number, { type } = { type: defaultType }) => {
+        const index = indexCallback ? indexCallback(dirtyIndex) : dirtyIndex;
+        return values[type][index];
+    };
 }
 
 function buildLocalizeArrayFn(values:IDateFnsLocaleValues, defaultType:string):DateFnsHelper<IDateFnsHelperOptions, string[]> {
@@ -70,14 +80,29 @@ export class DateFnsParser {
             short: locale.monthsShort
         };
 
+        const timeOfDayValues = {
+            long: locale.timesOfDay,
+            uppercase: locale.timesOfDayUppercase,
+            lowercase: locale.timesOfDayLowercase
+        };
+
+        const timeOfDayMatchValues = {
+            long: locale.timesOfDay,
+            short: locale.timesOfDayUppercase.concat(locale.timesOfDayLowercase)
+        };
+
         this._locale = defaultLocale as any;
         this._locale.localize = {
             ...this._locale.localize,
             ...{
                 weekday: buildLocalizeFn(weekdayValues, "long"),
                 weekdays: buildLocalizeArrayFn(weekdayValues, "long"),
                 month: buildLocalizeFn(monthValues, "long"),
-                months: buildLocalizeArrayFn(monthValues, "long")
+                months: buildLocalizeArrayFn(monthValues, "long"),
+                timeOfDay: buildLocalizeFn(timeOfDayValues, "long", (hours:number) => {
+                    return hours / 12 >= 1 ? 1 : 0;
+                }),
+                timesOfDay: buildLocalizeArrayFn(timeOfDayValues, "long")
             }
         };
         this._locale.match = {
@@ -86,7 +111,9 @@ export class DateFnsParser {
                 weekdays: buildMatchFn(weekdayValues, "long"),
                 weekday: buildParseFn(weekdayValues, "long"),
                 months: buildMatchFn(monthValues, "long"),
-                month: buildParseFn(monthValues, "long")
+                month: buildParseFn(monthValues, "long"),
+                timesOfDay:buildMatchFn(timeOfDayMatchValues, "long"),
+                timeOfDay:buildParseFn(timeOfDayMatchValues, "long")
             }
         };
     }