diff --git a/packages/client/src/components/global/time.vue b/packages/client/src/components/global/time.vue
index 801490225..b1bd779a2 100644
--- a/packages/client/src/components/global/time.vue
+++ b/packages/client/src/components/global/time.vue
@@ -1,5 +1,5 @@
 <template>
-<time :title="absolute">
+<time :title="absolute" :datetime="_time.toISOString()">
 	<template v-if="mode === 'relative'">{{ relative }}</template>
 	<template v-else-if="mode === 'absolute'">{{ absolute }}</template>
 	<template v-else-if="mode === 'detail'">{{ absolute }} ({{ relative }})</template>
@@ -12,27 +12,52 @@ import { i18n } from '@/i18n';
 
 const props = withDefaults(defineProps<{
 	time: Date | string;
+	format?: 'both' | 'date' | 'time';
 	mode?: 'relative' | 'absolute' | 'detail';
 }>(), {
+	format: 'both',
 	mode: 'relative',
 });
 
 const _time = typeof props.time === 'string' ? new Date(props.time) : props.time;
-const absolute = _time.toLocaleString();
+const absolute = (): string => {
+	switch (props.format) {
+		case 'date': return _time.toLocaleDateString();
+		case 'time': return _time.toLocaleTimeString();
+		default: return _time.toLocaleString();
+	}
+}();
 
 let now = $ref(new Date());
 const relative = $computed(() => {
 	const ago = (now.getTime() - _time.getTime()) / 1000/*ms*/;
-	return (
-		ago >= 31536000 ? i18n.t('_ago.yearsAgo', { n: Math.round(ago / 31536000).toString() }) :
-		ago >= 2592000 ? i18n.t('_ago.monthsAgo', { n: Math.round(ago / 2592000).toString() }) :
-		ago >= 604800 ? i18n.t('_ago.weeksAgo', { n: Math.round(ago / 604800).toString() }) :
-		ago >= 86400 ? i18n.t('_ago.daysAgo', { n: Math.round(ago / 86400).toString() }) :
-		ago >= 3600 ? i18n.t('_ago.hoursAgo', { n: Math.round(ago / 3600).toString() }) :
-		ago >= 60 ? i18n.t('_ago.minutesAgo', { n: (~~(ago / 60)).toString() }) :
-		ago >= 10 ? i18n.t('_ago.secondsAgo', { n: (~~(ago % 60)).toString() }) :
-		ago >= -1 ? i18n.ts._ago.justNow :
-		i18n.ts._ago.future);
+
+	if (ago >= 31536000)
+		return i18n.t('_ago.yearsAgo', { n: Math.round(ago / 31536000).toString() });
+	if (ago >= 2592000)
+		return i18n.t('_ago.monthsAgo', { n: Math.round(ago / 2592000).toString() });
+	if (ago >= 604800)
+		return i18n.t('_ago.weeksAgo', { n: Math.round(ago / 604800).toString() });
+	if (ago >= 86400)
+		return i18n.t('_ago.daysAgo', { n: Math.round(ago / 86400).toString() });
+
+	// if the format is 'date', the relative date precision is no more than days ago
+	if (props.format !== 'date' && ago >= 3600)
+		return i18n.t('_ago.hoursAgo', { n: Math.round(ago / 3600).toString() });
+	if (props.format !== 'date' && ago >= 60)
+		return i18n.t('_ago.minutesAgo', { n: (~~(ago / 60)).toString() });
+	if (props.format !== 'date' && ago >= 10)
+		return i18n.t('_ago.secondsAgo', { n: (~~(ago % 60)).toString() });
+
+	if (ago >= -5) {
+		if (props.format === 'date') {
+			// this is also the catch-all for the formats with hour/minute/second precision
+			return i18n.ts.today;
+		} else {
+			return i18n.ts._ago.justNow;
+		}
+	}
+	return i18n.ts._ago.future;
 });
 
 function tick() {