github/directus
1
0
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-01-28 09:07:58 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add relative option to datetime display

Browse Source
This commit is contained in:
rijkvanzanten
2020-08-12 13:26:06 -04:00
parent 4eb28c7ebb
commit 1ca86967f7
1 changed files with 16 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
app/src/displays/datetime/datetime.vue
View File

@@ -4,7 +4,8 @@
<script lang="ts">
import { defineComponent, ref, watch, PropType } from '@vue/composition-api';
import formatLocalized from '@/utils/localized-format';
import localizedFormat from '@/utils/localized-format';
import localizedFormatDistance from '@/utils/localized-format-distance';
import i18n from '@/lang';
import parseISO from 'date-fns/parseISO';
@@ -19,6 +20,10 @@ export default defineComponent({
required: true,
validator: (val: string) => ['datetime', 'date', 'time', 'timestamp'].includes(val),
},
relative: {
type: Boolean,
default: false,
},
},
setup(props) {
const displayValue = ref<string | null>(null);
@@ -33,11 +38,17 @@ export default defineComponent({
const date = parseISO(props.value);
let format = `${i18n.t('date-fns_date')} ${i18n.t('date-fns_time')}`;
if (props.type === 'date') format = String(i18n.t('date-fns_date'));
if (props.type === 'time') format = String(i18n.t('date-fns_time'));
if (props.relative) {
displayValue.value = await localizedFormatDistance(date, new Date(), {
addSuffix: true,
});
} else {
let format = `${i18n.t('date-fns_date')} ${i18n.t('date-fns_time')}`;
if (props.type === 'date') format = String(i18n.t('date-fns_date'));
if (props.type === 'time') format = String(i18n.t('date-fns_time'));
displayValue.value = await formatLocalized(date, format);
displayValue.value = await localizedFormat(date, format);
}
},
{ immediate: true }
);