diff --git a/static/js/composebox_typeahead.js b/static/js/composebox_typeahead.js
index 238ba4baee..6e83f49ac9 100644
--- a/static/js/composebox_typeahead.js
+++ b/static/js/composebox_typeahead.js
@@ -1,4 +1,4 @@
-import {formatISO} from "date-fns";
+import {format} from "date-fns";
 import ConfirmDatePlugin from "flatpickr/dist/plugins/confirmDate/confirmDate";
 import $ from "jquery";
 import _ from "lodash";
@@ -778,7 +778,7 @@ const show_flatpickr = (element, callback, default_timestamp) => {
         plugins: [new ConfirmDatePlugin({})],
         positionElement: element,
         dateFormat: "Z",
-        formatDate: (date) => formatISO(date),
+        formatDate: (date) => format(date, "yyyy-MM-dd|HH:mm:ss|'UTC'xxx"),
     });
     const container = $($(instance.innerContainer).parent());
     container.on("click", ".flatpickr-calendar", (e) => {
diff --git a/static/js/markdown.js b/static/js/markdown.js
index 67a57a66ea..7f0ce5c50a 100644
--- a/static/js/markdown.js
+++ b/static/js/markdown.js
@@ -346,7 +346,14 @@ function handleEmoji(emoji_name) {
 function handleTimestamp(time) {
     let timeobject;
     if (Number.isNaN(Number(time))) {
-        timeobject = new Date(time); // not a Unix timestamp
+        // Check if the time string is of the new more-readable format.
+        if (time.includes("|UTC")) {
+            // Remove and replace the non-standard characters with the ISO ones.
+            const standard_format_time = time.replace("|UTC", "").replace(/\|/g, "T");
+            timeobject = new Date(standard_format_time);
+        } else {
+            timeobject = new Date(time); // not a Unix timestamp
+        }
     } else {
         // JavaScript dates are in milliseconds, Unix timestamps are in seconds
         timeobject = new Date(time * 1000);
diff --git a/zerver/lib/markdown/__init__.py b/zerver/lib/markdown/__init__.py
index f55714c89a..d6de4252a1 100644
--- a/zerver/lib/markdown/__init__.py
+++ b/zerver/lib/markdown/__init__.py
@@ -1369,7 +1369,13 @@ class Timestamp(markdown.inlinepatterns.Pattern):
         time_input_string = match.group("time")
         timestamp = None
         try:
-            timestamp = dateutil.parser.parse(time_input_string, tzinfos=common_timezones)
+            # Check if the time string is of the new more-readable format.
+            if "|UTC" in time_input_string:
+                # Remove and replace the non-standard characters with the ISO ones.
+                standard_format_time = time_input_string.replace("|", "T", 1).replace("|UTC", "")
+                timestamp = dateutil.parser.parse(standard_format_time, tzinfos=common_timezones)
+            else:
+                timestamp = dateutil.parser.parse(time_input_string, tzinfos=common_timezones)
         except ValueError:
             try:
                 timestamp = datetime.datetime.fromtimestamp(float(time_input_string))
diff --git a/zerver/tests/fixtures/markdown_test_cases.json b/zerver/tests/fixtures/markdown_test_cases.json
index c449e0ed5a..d1c03fcf1e 100644
--- a/zerver/tests/fixtures/markdown_test_cases.json
+++ b/zerver/tests/fixtures/markdown_test_cases.json
@@ -790,6 +790,19 @@
       "expected_output": "<p>Let's meet at <time datetime=\"2017-06-05T22:30:00Z\">1496701800</time>.</p>",
       "text_content": "Let's meet at 1496701800."
     },
+    {
+      "name": "timestamp_new_format",
+      "input": "<time:2021-08-02|14:03:00|UTC+05:30>",
+      "expected_output": "<p><time datetime=\"2021-08-02T08:33:00Z\">2021-08-02|14:03:00|UTC+05:30</time></p>",
+      "text_content": "2021-08-02|14:03:00|UTC+05:30"
+    },
+    {
+      "name": "timestamp_without_utc",
+      "input": "<time:2021-08-02|14:03:00|+05:30>",
+      "expected_output": "<p><span class=\"timestamp-error\">Invalid time format: 2021-08-02|14:03:00|+05:30</span></p>",
+      "marked_expected_output": "<p><span>2021-08-02|14:03:00|+05:30</span></p>",
+      "text_content": "Invalid time format: 2021-08-02|14:03:00|+05:30"
+    },
     {
       "name": "tex_inline",
       "input": "$$1 \\oplus 0 = 1$$",