change transaction time component

src/Mobile.vue

@@ -57,6 +57,11 @@ export default {
                     iosSwipeBackAnimateShadow: false,
                     mdSwipeBackAnimateShadow: false
                 },
+                calendar: {
+                    locale: 'en',
+                    openIn: 'customModal',
+                    backdrop: true
+                },
                 serviceWorker: {
                     path: self.$settings.isProduction() ? './sw.js' : undefined,
                     scope: './',

src/lib/utils.js

@@ -80,6 +80,18 @@ function getTimezoneOffsetMinutes(timezone) {
     return getUtcOffsetMinutesByUtcOffset(utcOffset);
 }
 
+function getBrowserTimezoneOffsetMinutes() {
+    return -new Date().getTimezoneOffset();
+}
+
+function getLocalDatetimeFromUnixTime(unixTime) {
+    return new Date(unixTime * 1000);
+}
+
+function getUnixTimeFromLocalDatetime(datetime) {
+    return datetime.getTime() / 1000;
+}
+
 function getActualUnixTimeForStore(unixTime, utcOffset, currentUtcOffset) {
     return unixTime - (utcOffset - currentUtcOffset) * 60;
 }
@@ -632,6 +644,9 @@ export default {
     getUtcOffsetByUtcOffsetMinutes,
     getTimezoneOffset,
     getTimezoneOffsetMinutes,
+    getBrowserTimezoneOffsetMinutes,
+    getLocalDatetimeFromUnixTime,
+    getUnixTimeFromLocalDatetime,
     getActualUnixTimeForStore,
     getDummyUnixTimeForLocalUsage,
     getCurrentUnixTime,

src/locales/en.js

@@ -36,6 +36,11 @@ export default {
             'symbol': '{symbol} {amount}'
         }
     },
+    'input-format': {
+        'datetime': {
+            'long': 'm/d/yyyy hh::mm A',
+        },
+    },
     'datetime': {
         'Monday': {
             'short': 'Mon',
@@ -66,39 +71,51 @@ export default {
             'long': 'Sunday'
         },
         'January': {
+            'short': 'Jan',
             'long': 'January'
         },
         'February': {
+            'short': 'Feb',
             'long': 'February'
         },
         'March': {
+            'short': 'Mar',
             'long': 'March'
         },
         'April': {
+            'short': 'Apr',
             'long': 'April'
         },
         'May': {
+            'short': 'May',
             'long': 'May'
         },
         'June': {
+            'short': 'Jun',
             'long': 'June'
         },
         'July': {
+            'short': 'Jul',
             'long': 'July'
         },
         'August': {
+            'short': 'Aug',
             'long': 'August'
         },
         'September': {
+            'short': 'Sep',
             'long': 'September'
         },
         'October': {
+            'short': 'Oct',
             'long': 'October'
         },
         'November': {
+            'short': 'Nov',
             'long': 'November'
         },
         'December': {
+            'short': 'Dec',
             'long': 'December'
         }
     },
@@ -655,6 +672,8 @@ export default {
     'Custom Date': 'Custom Date',
     'Begin Time': 'Begin Time',
     'End Time': 'End Time',
+    'Select Date': 'Select Date',
+    'Select Time': 'Select Time',
     'Custom': 'Custom',
     'Pie Chart': 'Pie Chart',
     'Bar Chart': 'Bar Chart',

src/locales/zh_Hans.js

@@ -36,6 +36,11 @@ export default {
             'symbol': '{symbol} {amount}'
         }
     },
+    'input-format': {
+        'datetime': {
+            'long': 'yyyy年m月d日 HH::mm',
+        },
+    },
     'datetime': {
         'Monday': {
             'short': '周一',
@@ -66,39 +71,51 @@ export default {
             'long': '星期日'
         },
         'January': {
+            'short': '1月',
             'long': '1月'
         },
         'February': {
+            'short': '2月',
             'long': '2月'
         },
         'March': {
+            'short': '3月',
             'long': '3月'
         },
         'April': {
+            'short': '4月',
             'long': '4月'
         },
         'May': {
+            'short': '5月',
             'long': '5月'
         },
         'June': {
+            'short': '6月',
             'long': '6月'
         },
         'July': {
+            'short': '7月',
             'long': '7月'
         },
         'August': {
+            'short': '8月',
             'long': '8月'
         },
         'September': {
+            'short': '9月',
             'long': '9月'
         },
         'October': {
+            'short': '10月',
             'long': '10月'
         },
         'November': {
+            'short': '11月',
             'long': '11月'
         },
         'December': {
+            'short': '12月',
             'long': '12月'
         }
     },
@@ -655,6 +672,8 @@ export default {
     'Custom Date': '自定义日期',
     'Begin Time': '开始时间',
     'End Time': '结束时间',
+    'Select Date': '选择日期',
+    'Select Time': '选择时间',
     'Custom': '自定义',
     'Pie Chart': '饼图',
     'Bar Chart': '条形图',

src/mobile-main.js

@@ -29,6 +29,8 @@ import Framework7Radio from 'framework7/components/radio/radio';
 import Framework7Toggle from 'framework7/components/toggle/toggle';
 import Framework7SmartSelect from 'framework7/components/smart-select/smart-select';
 import Framework7Grid from 'framework7/components/grid/grid';
+import Framework7Calendar from 'framework7/components/calendar/calendar';
+import Framework7Picker from 'framework7/components/picker/picker';
 import Framework7InfiniteScroll from 'framework7/components/infinite-scroll/infinite-scroll';
 import Framework7PullToRefresh from 'framework7/components/pull-to-refresh/pull-to-refresh';
 import Framework7Searchbar from 'framework7/components/searchbar/searchbar';
@@ -121,6 +123,8 @@ Framework7.use(Framework7Radio);
 Framework7.use(Framework7Toggle);
 Framework7.use(Framework7SmartSelect);
 Framework7.use(Framework7Grid);
+Framework7.use(Framework7Calendar);
+Framework7.use(Framework7Picker);
 Framework7.use(Framework7InfiniteScroll);
 Framework7.use(Framework7PullToRefresh);
 Framework7.use(Framework7Searchbar);
@@ -199,6 +203,72 @@ Vue.prototype.$locale = {
     defaultTimezoneOffsetMinutes: utils.getTimezoneOffsetMinutes(),
     getDefaultLanguage: getDefaultLanguage,
     getAllLanguages: getAllLanguages,
+    getAllLongMonthNames: function () {
+        return [
+            i18n.t('datetime.January.long'),
+            i18n.t('datetime.February.long'),
+            i18n.t('datetime.March.long'),
+            i18n.t('datetime.April.long'),
+            i18n.t('datetime.May.long'),
+            i18n.t('datetime.June.long'),
+            i18n.t('datetime.July.long'),
+            i18n.t('datetime.August.long'),
+            i18n.t('datetime.September.long'),
+            i18n.t('datetime.October.long'),
+            i18n.t('datetime.November.long'),
+            i18n.t('datetime.December.long')
+        ];
+    },
+    getAllShortMonthNames: function () {
+        return [
+            i18n.t('datetime.January.short'),
+            i18n.t('datetime.February.short'),
+            i18n.t('datetime.March.short'),
+            i18n.t('datetime.April.short'),
+            i18n.t('datetime.May.short'),
+            i18n.t('datetime.June.short'),
+            i18n.t('datetime.July.short'),
+            i18n.t('datetime.August.short'),
+            i18n.t('datetime.September.short'),
+            i18n.t('datetime.October.short'),
+            i18n.t('datetime.November.short'),
+            i18n.t('datetime.December.short')
+        ];
+    },
+    getAllLongWeekdayNames: function () {
+        return [
+            i18n.t('datetime.Sunday.long'),
+            i18n.t('datetime.Monday.long'),
+            i18n.t('datetime.Tuesday.long'),
+            i18n.t('datetime.Wednesday.long'),
+            i18n.t('datetime.Thursday.long'),
+            i18n.t('datetime.Friday.long'),
+            i18n.t('datetime.Saturday.long')
+        ];
+    },
+    getAllShortWeekdayNames: function () {
+        return [
+            i18n.t('datetime.Sunday.short'),
+            i18n.t('datetime.Monday.short'),
+            i18n.t('datetime.Tuesday.short'),
+            i18n.t('datetime.Wednesday.short'),
+            i18n.t('datetime.Thursday.short'),
+            i18n.t('datetime.Friday.short'),
+            i18n.t('datetime.Saturday.short')
+        ];
+    },
+    getInputTimeIntlDateTimeFormatOptions: function () {
+        const hourMinuteFormat = i18n.t('input-format.datetime.long');
+        const is24HourFormat = hourMinuteFormat.indexOf('H') > 0;
+        const hour2Digits = (hourMinuteFormat.indexOf('HH') > 0) || (hourMinuteFormat.indexOf('hh') > 0);
+        const minute2Digits = hourMinuteFormat.indexOf(':mm') > 0;
+
+        return {
+            hour12: !is24HourFormat,
+            hour: hour2Digits ? '2-digit' : 'numeric',
+            minute: minute2Digits ? '2-digit' : 'numeric'
+        }
+    },
     getLanguage: getLanguage,
     setLanguage: function (locale) {
         if (settings.getLanguage() !== locale) {

src/views/mobile/transactions/Edit.vue

@@ -196,10 +196,21 @@
 
                     <f7-list-input
                         :label="$t('Transaction Time')"
-                        type="datetime-local"
+                        type="datepicker"
                         class="transaction-edit-time"
+                        :calendar-params="{
+                            timePicker: true,
+                            dateFormat: $t('input-format.datetime.long'),
+                            firstDay: defaultFirstDayOfWeek,
+                            toolbarCloseText: $t('Done'),
+                            timePickerPlaceholder: $t('Select Time'),
+                            timePickerFormat: $locale.getInputTimeIntlDateTimeFormatOptions(),
+                            monthNames: $locale.getAllLongMonthNames(),
+                            monthNamesShort: $locale.getAllShortMonthNames(),
+                            dayNames: $locale.getAllLongWeekdayNames(),
+                            dayNamesShort: $locale.getAllShortWeekdayNames()}"
                         :value="transaction.time"
-                        @input="transaction.time = $event.target.value"
+                        @calendar:change="transaction.time = $event"
                     >
                     </f7-list-input>
 
@@ -295,7 +306,7 @@ export default {
             transaction: {
                 type: defaultType,
                 unixTime: now,
-                time: self.$utilities.formatUnixTime(now, 'YYYY-MM-DDTHH:mm'),
+                time: self.$utilities.getLocalDatetimeFromUnixTime(now),
                 timeZone: currentTimezone,
                 utcOffset: self.$utilities.getTimezoneOffsetMinutes(currentTimezone),
                 expenseCategory: '',
@@ -362,8 +373,8 @@ export default {
         defaultCurrency() {
             return this.$store.getters.currentUserDefaultCurrency;
         },
-        defaultTimezoneOffset() {
+        defaultFirstDayOfWeek() {
-            return this.$locale.defaultTimezoneOffset;
+            return this.$store.getters.currentUserFirstDayOfWeek;
         },
         allTimezones() {
             return this.$locale.getAllTimezones(true);
@@ -526,13 +537,17 @@ export default {
             }
         },
         'transaction.time': function (newValue) {
-            if (!newValue) {
+            if (this.$utilities.isArray(newValue)) {
-                newValue = this.$utilities.formatUnixTime(this.$utilities.getCurrentUnixTime(), 'YYYY-MM-DDTHH:mm');
+                newValue = newValue[0];
-                this.transaction.time = newValue;
             }
 
-            if (this.$utilities.formatUnixTime(this.transaction.unixTime, 'YYYY-MM-DDTHH:mm') !== newValue) {
+            if (!newValue) {
-                this.transaction.unixTime = this.$utilities.getUnixTime(newValue);
+                newValue = this.$utilities.getLocalDatetimeFromUnixTime(this.$utilities.getCurrentUnixTime());
+                this.transaction.time = [newValue];
+            }
+
+            if (this.$utilities.getUnixTimeFromLocalDatetime(newValue) !== this.transaction.unixTime) {
+                this.transaction.unixTime = this.$utilities.getUnixTimeFromLocalDatetime(newValue);
             }
         },
         'transaction.timeZone': function (newValue) {
@@ -656,8 +671,8 @@ export default {
                 if (self.mode === 'edit' || self.mode === 'view') {
                     self.transaction.utcOffset = transaction.utcOffset;
                     self.transaction.timeZone = null;
-                    self.transaction.unixTime = self.$utilities.getDummyUnixTimeForLocalUsage(transaction.time, self.transaction.utcOffset, self.$utilities.getTimezoneOffsetMinutes());
+                    self.transaction.unixTime = self.$utilities.getDummyUnixTimeForLocalUsage(transaction.time, self.transaction.utcOffset, self.$utilities.getBrowserTimezoneOffsetMinutes());
-                    self.transaction.time = self.$utilities.formatUnixTime(self.transaction.unixTime, 'YYYY-MM-DDTHH:mm');
+                    self.transaction.time = [self.$utilities.getLocalDatetimeFromUnixTime(self.transaction.unixTime)];
                 }
 
                 self.transaction.sourceAccountId = transaction.sourceAccountId;
@@ -706,7 +721,7 @@ export default {
 
             const submitTransaction = {
                 type: self.transaction.type,
-                time: self.$utilities.getActualUnixTimeForStore(self.transaction.unixTime, self.transaction.utcOffset, self.$utilities.getTimezoneOffsetMinutes()),
+                time: self.$utilities.getActualUnixTimeForStore(self.transaction.unixTime, self.transaction.utcOffset, self.$utilities.getBrowserTimezoneOffsetMinutes()),
                 sourceAccountId: self.transaction.sourceAccountId,
                 sourceAmount: self.transaction.sourceAmount,
                 destinationAccountId: '0',
@@ -913,10 +928,6 @@ export default {
     text-overflow: ellipsis;
 }
 
-.transaction-edit-time input[type="datetime-local"] {
-    max-width: inherit;
-}
-
 .transaction-edit-timezone-name {
     padding-left: 4px;
 }