mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-14 06:57:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

use time picker in datetime selection sheet for mobile device

Browse Source
This commit is contained in:
MaysWind
2024-03-03 20:59:37 +08:00
parent 57b2b2492f
commit bed2aef7f8
5 changed files with 233 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/mobile/DateTimeSelectionSheet.vue
+132 -13
View File
@@ -16,12 +16,12 @@
month-name-format="long"
six-weeks="center"
class="justify-content-center"
:enable-time-picker="false"
:clearable="false"
:dark="isDarkMode"
:week-start="firstDayOfWeek"
:year-range="yearRange"
:day-names="dayNames"
:is24="is24Hour"
v-model="dateTime">
<template #month="{ text }">
{{ getMonthShortName(text) }}
@@ -29,10 +29,11 @@
<template #month-overlay-value="{ text }">
{{ getMonthShortName(text) }}
</template>
<template #am-pm-button="{ toggle, value }">
<button class="dp__pm_am_button" tabindex="0" @click="toggle">{{ $t(`datetime.${value}.content`) }}</button>
</template>
</vue-date-picker>
<div class="block block-outline no-margin no-padding padding-vertical-half">
<div id="time-picker-container" class="time-picker-container"></div>
</div>
<input id="time-picker-input" style="display: none" type="text" readonly="readonly"/>
</f7-page-content>
</f7-sheet>
</template>
@@ -41,14 +42,18 @@
import { mapStores } from 'pinia';
import { useUserStore } from '@/stores/user.js';
import datetimeConstants from '@/consts/datetime.js';
import { arrangeArrayWithNewStartIndex } from '@/lib/common.js';
import {
getCurrentUnixTime,
getCurrentDateTime,
getUnixTime,
getLocalDatetimeFromUnixTime,
getYear
getYear,
getTimeValues,
getCombinedDatetimeByDateAndTimeValues
} from '@/lib/datetime.js';
import { createInlinePicker } from '@/lib/ui.mobile.js';
export default {
props: [
@@ -60,19 +65,28 @@ export default {
'update:show'
],
data() {
const userStore = useUserStore();
const self = this;
self.is24Hour = self.$locale.isLongTime24HourFormat(userStore);
self.isMeridiemIndicatorFirst = self.$locale.isLongTimeMeridiemIndicatorFirst(userStore);
self.timePickerHolder = null;
let value = getCurrentUnixTime();
if (self.modelValue) {
value = self.modelValue;
}
const datetime = getLocalDatetimeFromUnixTime(value);
return {
yearRange: [
2000,
getYear(getCurrentDateTime()) + 1
],
dateTime: getLocalDatetimeFromUnixTime(value),
dateTime: datetime,
timeValues: self.getTimeValues(datetime),
}
},
computed: {
@@ -85,31 +99,55 @@ export default {
},
dayNames() {
return arrangeArrayWithNewStartIndex(this.$locale.getAllMinWeekdayNames(), this.firstDayOfWeek);
},
is24Hour() {
return this.$locale.isLongTime24HourFormat(this.userStore);
}
},
beforeUnmount() {
if (this.timePickerHolder) {
this.timePickerHolder.destroy();
this.timePickerHolder = null;
}
},
methods: {
onSheetOpen() {
if (this.modelValue) {
this.dateTime = getLocalDatetimeFromUnixTime(this.modelValue)
const self = this;
if (self.modelValue) {
self.dateTime = getLocalDatetimeFromUnixTime(self.modelValue);
}
this.$refs.datetimepicker.switchView('calendar');
self.timeValues = self.getTimeValues(self.dateTime);
if (!self.timePickerHolder) {
self.timePickerHolder = createInlinePicker('#time-picker-container', '#time-picker-input',
self.getTimePickerColumns(), self.timeValues, {
change(picker, values) {
self.timeValues = values;
}
});
} else {
self.timePickerHolder.setValue(self.timeValues);
}
self.$refs.datetimepicker.switchView('calendar');
},
onSheetClosed() {
this.$emit('update:show', false);
},
setCurrentTime() {
this.dateTime = getLocalDatetimeFromUnixTime(getCurrentUnixTime())
this.timeValues = this.getTimeValues(this.dateTime);
if (this.timePickerHolder) {
this.timePickerHolder.setValue(this.timeValues);
}
},
confirm() {
if (!this.dateTime) {
return;
}
const unixTime = getUnixTime(this.dateTime);
const finalDatetime = getCombinedDatetimeByDateAndTimeValues(this.dateTime, this.timeValues, this.is24Hour, this.isMeridiemIndicatorFirst);
const unixTime = getUnixTime(finalDatetime);
if (unixTime < 0) {
this.$toast('Date is too early');
@@ -121,6 +159,83 @@ export default {
},
getMonthShortName(month) {
return this.$locale.getMonthShortName(month);
},
getTimeValues(datetime) {
return getTimeValues(datetime, this.is24Hour, this.isMeridiemIndicatorFirst);
},
getTimePickerColumns() {
const self = this;
const ret = [];
if (!self.is24Hour && this.isMeridiemIndicatorFirst) {
ret.push({
values: datetimeConstants.allMeridiemIndicatorsArray,
displayValues: self.$locale.getAllMeridiemIndicatorNames()
});
}
// Hours
ret.push({
values: self.generateAllHours()
});
// Divider
ret.push({
divider: true,
content: ':',
});
// Minutes
ret.push({
values: self.generateAllMinutesOrSeconds()
});
// Divider
ret.push({
divider: true,
content: ':',
});
// Seconds
ret.push({
values: self.generateAllMinutesOrSeconds()
});
if (!self.is24Hour && !this.isMeridiemIndicatorFirst) {
ret.push({
values: datetimeConstants.allMeridiemIndicatorsArray,
displayValues: self.$locale.getAllMeridiemIndicatorNames()
});
}
return ret;
},
getDisplayTimeValue(value) {
if (value < 10) {
return `0${value}`;
} else {
return value.toString();
}
},
generateAllHours() {
const ret = [];
const startHour = this.is24Hour ? 0 : 1;
const endHour = this.is24Hour ? 23 : 11;
if (!this.is24Hour) {
ret.push('12');
}
for (let i = startHour; i <= endHour; i++) {
ret.push(this.getDisplayTimeValue(i));
}
return ret;
},
generateAllMinutesOrSeconds() {
const ret = [];
for (let i = 0; i < 60; i++) {
ret.push(this.getDisplayTimeValue(i));
}
return ret;
}
}
}
@@ -130,4 +245,8 @@ export default {
.date-time-selection-sheet .dp__menu {
border: 0;
}
.date-time-selection-sheet .time-picker-container .picker-columns {
justify-content: space-evenly;
}
</style>
src/consts/datetime.js
+24 -6
View File
@@ -1,3 +1,13 @@
const allMeridiemIndicators = {
AM: 'AM',
PM: 'PM'
};
const allMeridiemIndicatorsArray = [
allMeridiemIndicators.AM,
allMeridiemIndicators.PM
];
const allMonthsArray = [
'January',
'February',
@@ -100,17 +110,20 @@ const allLongTimeFormat = {
HHMMSS: {
type: 1,
key: 'hh_mm_ss',
is24HourFormat: true
is24HourFormat: true,
isMeridiemIndicatorFirst: null
},
AHHMMSS: {
type: 2,
key: 'a_hh_mm_ss',
is24HourFormat: false
is24HourFormat: false,
isMeridiemIndicatorFirst: true
},
HHMMSSA: {
type: 3,
key: 'hh_mm_ss_a',
is24HourFormat: false
is24HourFormat: false,
isMeridiemIndicatorFirst: false
}
};
@@ -124,17 +137,20 @@ const allShortTimeFormat = {
HHMM: {
type: 1,
key: 'hh_mm',
is24HourFormat: true
is24HourFormat: true,
isMeridiemIndicatorFirst: null
},
AHHMM: {
type: 2,
key: 'a_hh_mm',
is24HourFormat: false
is24HourFormat: false,
isMeridiemIndicatorFirst: true
},
HHMMA: {
type: 3,
key: 'hh_mm_a',
is24HourFormat: false
is24HourFormat: false,
isMeridiemIndicatorFirst: false
}
};
@@ -203,6 +219,8 @@ const defaultShortTimeFormat = allShortTimeFormat.HHMM;
const defaultDateTimeFormatValue = 0;
export default {
allMeridiemIndicators: allMeridiemIndicators,
allMeridiemIndicatorsArray: allMeridiemIndicatorsArray,
allWeekDays: allWeekDays,
allWeekDaysArray: allWeekDaysArray,
allMonthsArray: allMonthsArray,
src/lib/datetime.js
+41
View File
@@ -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
+24 -1
View File
@@ -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
+12
View File
@@ -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;