diff --git a/packages/hydrooj/package.json b/packages/hydrooj/package.json
index da122bf95..5720e8dfb 100644
--- a/packages/hydrooj/package.json
+++ b/packages/hydrooj/package.json
@@ -1,6 +1,6 @@
 {
     "name": "hydrooj",
-    "version": "3.1.30",
+    "version": "3.1.31",
     "bin": "bin/hydrooj.js",
     "main": "src/loader",
     "module": "src/loader",
diff --git a/packages/hydrooj/src/lib/misc.ts b/packages/hydrooj/src/lib/misc.ts
index f331b63f1..73566ecfb 100644
--- a/packages/hydrooj/src/lib/misc.ts
+++ b/packages/hydrooj/src/lib/misc.ts
@@ -1,4 +1,5 @@
 import AnsiUp from 'ansi_up';
+import moment from 'moment-timezone';
 import { ObjectID } from 'mongodb';
 import { formatSeconds, size } from '@hydrooj/utils/lib/utils';
 
@@ -10,7 +11,7 @@ export function ansiToHtml(str: string) {
     return AU.ansi_to_html(str);
 }
 
-export function datetimeSpan(dt: Date | ObjectID, relative = true, format = '%Y-%m-%d %H:%M:%S') {
+export function datetimeSpan(dt: Date | ObjectID, relative = true, format = 'YYYY-M-D H:mm:ss', tz = 'Asia/Shanghai') {
     if (!dt) return 'DATETIME_SPAN_ERROR';
     if (dt instanceof ObjectID) dt = new Date(dt.generationTime * 1000);
     else if (typeof dt === 'string' && ObjectID.isValid(dt)) dt = new Date(new ObjectID(dt).generationTime * 1000);
@@ -18,7 +19,7 @@ export function datetimeSpan(dt: Date | ObjectID, relative = true, format = '%Y-
     return '<span class="time{0}" data-timestamp="{1}">{2}</span>'.format(
         relative ? ' relative' : '',
         dt.getTime() / 1000,
-        dt.format(format),
+        moment(dt).tz(tz).format(format),
     );
 }
 
diff --git a/packages/ui-default/backendlib/template.js b/packages/ui-default/backendlib/template.js
index dbb8d59b0..5e92962de 100644
--- a/packages/ui-default/backendlib/template.js
+++ b/packages/ui-default/backendlib/template.js
@@ -124,7 +124,6 @@ env.addGlobal('Date', Date);
 env.addGlobal('process', process);
 env.addGlobal('global', global);
 env.addGlobal('typeof', (o) => typeof o);
-env.addGlobal('datetimeSpan', misc.datetimeSpan);
 env.addGlobal('paginate', misc.paginate);
 env.addGlobal('size', misc.size);
 env.addGlobal('utils', { status });
@@ -159,6 +158,7 @@ async function render(name, state) {
         if (typeof text === 'string') return text;
         return state._(text.message).format(...text.params || []) + ((process.env.DEV && text.stack) ? `\n${text.stack}` : '');
       }).join('\n'),
+      datetimeSpan: (arg0, arg1, arg2) => misc.datetimeSpan(arg0, arg1, arg2, state.handler.user?.timeZone),
       perm: global.Hydro.model.builtin.PERM,
       PRIV: global.Hydro.model.builtin.PRIV,
       STATUS: global.Hydro.model.builtin.STATUS,
diff --git a/packages/ui-default/package.json b/packages/ui-default/package.json
index bc72f7ce7..5491c6e7b 100644
--- a/packages/ui-default/package.json
+++ b/packages/ui-default/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hydrooj/ui-default",
-  "version": "4.26.17",
+  "version": "4.26.18",
   "author": "undefined <i@undefined.moe>",
   "license": "AGPL-3.0",
   "main": "hydro.js",
diff --git a/packages/ui-default/templates/components/contest.html b/packages/ui-default/templates/components/contest.html
index cd46bf87b..92cddab70 100644
--- a/packages/ui-default/templates/components/contest.html
+++ b/packages/ui-default/templates/components/contest.html
@@ -1,6 +1,6 @@
 {% import "components/user.html" as user with context %}
 {% macro render_time(tdoc_time) %}
-{{ datetimeSpan(tdoc_time, false, '%Y-%m-%d %H:%M')|safe }}
+{{ datetimeSpan(tdoc_time, false, 'YYYY-M-D H:mm')|safe }}
 {% endmacro %}
 
 {% macro render_duration(tdoc) %}
diff --git a/packages/ui-default/templates/components/homework.html b/packages/ui-default/templates/components/homework.html
index 253c5b02f..8a168f845 100644
--- a/packages/ui-default/templates/components/homework.html
+++ b/packages/ui-default/templates/components/homework.html
@@ -1,6 +1,6 @@
 {% import "components/user.html" as user with context %}
 {% macro render_time(tdoc_time) %}
-{{ datetimeSpan(tdoc_time, false, '%Y-%m-%d %H:%M')|safe }}
+{{ datetimeSpan(tdoc_time, false, 'YYYY-M-D H:mm')|safe }}
 {% endmacro %}
 
 {% macro render_extension(tdoc) %}
diff --git a/packages/ui-default/templates/contest_main.html b/packages/ui-default/templates/contest_main.html
index b333ce641..f60b334c6 100644
--- a/packages/ui-default/templates/contest_main.html
+++ b/packages/ui-default/templates/contest_main.html
@@ -84,8 +84,8 @@
             <div class="media">
               <div class="media__left medium">
                 <div class="contest__date numbox">
-                  <div class="numbox__num large">{{ datetimeSpan(tdoc['beginAt'], false, '%d')|safe }}</div>
-                  <div class="numbox__text">{{ datetimeSpan(tdoc['beginAt'], false, '%Y-%m')|safe }}</div>
+                  <div class="numbox__num large">{{ datetimeSpan(tdoc['beginAt'], false, 'D')|safe }}</div>
+                  <div class="numbox__text">{{ datetimeSpan(tdoc['beginAt'], false, 'YYYY-M')|safe }}</div>
                 </div>
               </div>
               <div class="media__body medium">
diff --git a/packages/ui-default/templates/homework_main.html b/packages/ui-default/templates/homework_main.html
index 80825d5dd..6f023df56 100644
--- a/packages/ui-default/templates/homework_main.html
+++ b/packages/ui-default/templates/homework_main.html
@@ -29,8 +29,8 @@
             <div class="media">
               <div class="media__left medium">
                 <div class="homework__date numbox">
-                  <div class="numbox__num large">{{ datetimeSpan(tdoc['penaltySince'], false, '%d')|safe }}</div>
-                  <div class="numbox__text">{{ datetimeSpan(tdoc['penaltySince'], false, '%Y-%m')|safe }}</div>
+                  <div class="numbox__num large">{{ datetimeSpan(tdoc['penaltySince'], false, 'D')|safe }}</div>
+                  <div class="numbox__text">{{ datetimeSpan(tdoc['penaltySince'], false, 'YYYY-M')|safe }}</div>
                 </div>
               </div>
               <div class="media__body medium">
diff --git a/packages/ui-default/templates/partials/homepage/contest.html b/packages/ui-default/templates/partials/homepage/contest.html
index 8a525b343..eadac44d9 100644
--- a/packages/ui-default/templates/partials/homepage/contest.html
+++ b/packages/ui-default/templates/partials/homepage/contest.html
@@ -9,8 +9,8 @@
           <div class="media">
             <div class="media__left medium">
               <div class="contest__date numbox">
-                <div class="numbox__num large">{{ datetimeSpan(tdoc['beginAt'], false, '%d')|safe }}</div>
-                <div class="numbox__text">{{ datetimeSpan(tdoc['beginAt'], false, '%Y-%m')|safe }}</div>
+                <div class="numbox__num large">{{ datetimeSpan(tdoc['beginAt'], false, 'D')|safe }}</div>
+                <div class="numbox__text">{{ datetimeSpan(tdoc['beginAt'], false, 'YYYY-M')|safe }}</div>
               </div>
             </div>
             <div class="media__body medium">
diff --git a/packages/ui-default/templates/partials/homepage/homework.html b/packages/ui-default/templates/partials/homepage/homework.html
index 523e26f20..dd946c9b3 100644
--- a/packages/ui-default/templates/partials/homepage/homework.html
+++ b/packages/ui-default/templates/partials/homepage/homework.html
@@ -9,8 +9,8 @@
           <div class="media">
             <div class="media__left medium">
               <div class="homework__date numbox">
-                <div class="numbox__num large">{{ datetimeSpan(tdoc['penaltySince'], false, '%d')|safe }}</div>
-                <div class="numbox__text">{{ datetimeSpan(tdoc['penaltySince'], false, '%Y-%m')|safe }}</div>
+                <div class="numbox__num large">{{ datetimeSpan(tdoc['penaltySince'], false, 'D')|safe }}</div>
+                <div class="numbox__text">{{ datetimeSpan(tdoc['penaltySince'], false, 'YYYY-M')|safe }}</div>
               </div>
             </div>
             <div class="media__body medium">