use time picker in datetime selection sheet for mobile device

src/lib/datetime.js

@@ -3,6 +3,14 @@ import moment from 'moment';
 import dateTimeConstants from '@/consts/datetime.js';
 import { isNumber } from './common.js';
 
+export function isPM(hour) {
+    if (hour > 11) {
+        return true;
+    } else {
+        return false;
+    }
+}
+
 export function getUtcOffsetMinutesByUtcOffset(utcOffset) {
     if (!utcOffset) {
         return 0;
@@ -143,6 +151,10 @@ export function getMonthName(date) {
     return dateTimeConstants.allMonthsArray[dayOfWeek];
 }
 
+export function getAMOrPM(date) {
+    return isPM(moment(date).hour()) ? dateTimeConstants.allMeridiemIndicators.PM : dateTimeConstants.allMeridiemIndicators.AM;
+}
+
 export function getHour(date) {
     return moment(date).hour();
 }
@@ -155,6 +167,35 @@ export function getSecond(date) {
     return moment(date).second();
 }
 
+export function getTimeValues(date, is24Hour, isMeridiemIndicatorFirst) {
+    if (is24Hour) {
+        return moment(date).format('HH mm ss').split(' ');
+    } else if (/*!is24Hour && */isMeridiemIndicatorFirst) {
+        return [getAMOrPM(date)].concat(moment(date).format('hh mm ss').split(' '));
+    } else /* !is24Hour && !isMeridiemIndicatorFirst */ {
+        return moment(date).format('hh mm ss').split(' ').concat([getAMOrPM(date)]);
+    }
+}
+
+export function getCombinedDatetimeByDateAndTimeValues(date, timeValues, is24Hour, isMeridiemIndicatorFirst) {
+    const datetime = moment(date);
+    let time = datetime;
+
+    if (is24Hour) {
+        time = moment(timeValues.join(' '), 'HH mm ss');
+    } else if (/*!is24Hour && */isMeridiemIndicatorFirst) {
+        time = moment(timeValues.join(' '), 'A HH mm ss');
+    } else /* !is24Hour && !isMeridiemIndicatorFirst */ {
+        time = moment(timeValues.join(' '), 'HH mm ss A');
+    }
+
+    datetime.hour(time.hour());
+    datetime.minute(time.minute());
+    datetime.second(time.second());
+
+    return datetime;
+}
+
 export function getUnixTimeBeforeUnixTime(unixTime, amount, unit) {
     return moment.unix(unixTime).subtract(amount, unit).unix();
 }

src/lib/i18n.js

@@ -18,6 +18,7 @@ import {
 } from './common.js';
 
 import {
+    isPM,
     parseDateFromUnixTime,
     formatUnixTime,
     formatTime,
@@ -307,6 +308,13 @@ function getCurrencyName(currencyCode, translateFn) {
     return translateFn(`currency.${currencyCode}`);
 }
 
+function getAllMeridiemIndicatorNames(translateFn) {
+    return [
+        translateFn('datetime.AM.content'),
+        translateFn('datetime.PM.content')
+    ];
+}
+
 function getAllLongMonthNames(translateFn) {
     return [
         translateFn('datetime.January.long'),
@@ -469,12 +477,24 @@ function isLongTime24HourFormat(translateFn, formatTypeValue) {
     return type.is24HourFormat;
 }
 
+function isLongTimeMeridiemIndicatorFirst(translateFn, formatTypeValue) {
+    const defaultLongTimeFormatTypeName = translateFn('default.longTimeFormat');
+    const type = getDateTimeFormatType(datetime.allLongTimeFormat, datetime.allLongTimeFormatArray, defaultLongTimeFormatTypeName, datetime.defaultLongTimeFormat, formatTypeValue);
+    return type.isMeridiemIndicatorFirst;
+}
+
 function isShortTime24HourFormat(translateFn, formatTypeValue) {
     const defaultShortTimeFormatTypeName = translateFn('default.shortTimeFormat');
     const type = getDateTimeFormatType(datetime.allShortTimeFormat, datetime.allShortTimeFormatArray, defaultShortTimeFormatTypeName, datetime.defaultShortTimeFormat, formatTypeValue);
     return type.is24HourFormat;
 }
 
+function isShortTimeMeridiemIndicatorFirst(translateFn, formatTypeValue) {
+    const defaultShortTimeFormatTypeName = translateFn('default.shortTimeFormat');
+    const type = getDateTimeFormatType(datetime.allShortTimeFormat, datetime.allShortTimeFormatArray, defaultShortTimeFormatTypeName, datetime.defaultShortTimeFormat, formatTypeValue);
+    return type.isMeridiemIndicatorFirst;
+}
+
 function getDateTimeFormats(translateFn, allFormatMap, allFormatArray, localeFormatPathPrefix, localeDefaultFormatTypeName, systemDefaultFormatType) {
     const defaultFormat = getDateTimeFormat(translateFn, allFormatMap, allFormatArray,
         localeFormatPathPrefix, localeDefaultFormatTypeName, systemDefaultFormatType, datetime.defaultDateTimeFormatValue);
@@ -1149,7 +1169,7 @@ function setLanguage(i18nGlobal, locale, force) {
         weekdaysShort : getAllShortWeekdayNames(i18nGlobal.t),
         weekdaysMin : getAllMinWeekdayNames(i18nGlobal.t),
         meridiem: function (hours) {
-            if (hours > 11) {
+            if (isPM(hours)) {
                 return i18nGlobal.t('datetime.PM.content');
             } else {
                 return i18nGlobal.t('datetime.AM.content');
@@ -1256,6 +1276,7 @@ export function i18nFunctions(i18nGlobal) {
         getDefaultCurrency: () => getDefaultCurrency(i18nGlobal.t),
         getDefaultFirstDayOfWeek: () => getDefaultFirstDayOfWeek(i18nGlobal.t),
         getCurrencyName: (currencyCode) => getCurrencyName(currencyCode, i18nGlobal.t),
+        getAllMeridiemIndicatorNames: () => getAllMeridiemIndicatorNames(i18nGlobal.t),
         getAllLongMonthNames: () => getAllLongMonthNames(i18nGlobal.t),
         getAllShortMonthNames: () => getAllShortMonthNames(i18nGlobal.t),
         getAllLongWeekdayNames: () => getAllLongWeekdayNames(i18nGlobal.t),
@@ -1284,7 +1305,9 @@ export function i18nFunctions(i18nGlobal) {
         formatTimeToLongYearMonth: (userStore, dateTime) => formatTime(dateTime, getI18nLongYearMonthFormat(i18nGlobal.t, userStore.currentUserLongDateFormat)),
         formatTimeToShortYearMonth: (userStore, dateTime) => formatTime(dateTime, getI18nShortYearMonthFormat(i18nGlobal.t, userStore.currentUserShortDateFormat)),
         isLongTime24HourFormat: (userStore) => isLongTime24HourFormat(i18nGlobal.t, userStore.currentUserLongTimeFormat),
+        isLongTimeMeridiemIndicatorFirst: (userStore) => isLongTimeMeridiemIndicatorFirst(i18nGlobal.t, userStore.currentUserLongTimeFormat),
         isShortTime24HourFormat: (userStore) => isShortTime24HourFormat(i18nGlobal.t, userStore.currentUserShortTimeFormat),
+        isShortTimeMeridiemIndicatorFirst: (userStore) => isShortTimeMeridiemIndicatorFirst(i18nGlobal.t, userStore.currentUserShortTimeFormat),
         getAllTimezones: (includeSystemDefault) => getAllTimezones(includeSystemDefault, i18nGlobal.t),
         getTimezoneDifferenceDisplayText: (utcOffset) => getTimezoneDifferenceDisplayText(utcOffset, i18nGlobal.t),
         getAllCurrencies: () => getAllCurrencies(i18nGlobal.t),

src/lib/ui.mobile.js

@@ -73,6 +73,18 @@ export function hideLoading() {
     });
 }
 
+export function createInlinePicker(containerEl, inputEl, cols, value, events) {
+    return f7.picker.create({
+        containerEl: containerEl,
+        inputEl: inputEl,
+        toolbar: false,
+        rotateEffect: true,
+        value: value,
+        cols: cols,
+        on: events || {}
+    });
+}
+
 export function routeBackOnError(f7router, errorPropertyName) {
     const self = this;
     const router = f7router;