对呈现时间信息保证交互性友好
标签:UX, HTML, dayjs
分类:开发
4分钟阅读
概述:如何在页面呈现健全的时间信息,本文给出一些建议和可用实践
正文
时间信息的呈现
<span>2024-03-15</span>
上面的信息基本展示到位,但是从 HTML 标签语义化出发,更应该使用 time 标签包裹。
另外, 使用 HTML#tag#time 标签包裹时,还可额外提供关于时间的,且机器可读格式的元信息
HTML
<time />
标签用来表示一个特定的时间段。该元素可包含 datetime 属性,用于将日期转换为机器可读格式,从而获得更好的搜索引擎结果或自定义功能(如提醒)。
<time datetime="2024-03-15T08:00:00.000+08:00"> 2024-03-15 </time>
进一步优化,从用户的访问性友好出发,譬如该文本有着“发布时间”的概念,那么可以如下再做一层包裹:
<dl>
<dt class="sr-only">Published On</dt>
<dd>
<time datetime="2024-03-15T08:00:00.000+08:00"> 24/03/15 </time>
</dd>
</dl>
sr-only-snippet
虽然上面几个代码段最终在页面上的视觉呈现都是一样的,不过从用户友好交互、SEO 查询上,显然最终的书写形式是更可取的方案,也推荐使用此
定义工具函数
下面我们选用 dayjs 作为时间格式化的工具库。
同时,如果页面潜在面向全球用户,期望对不同时区的阅读用户都做到在各自所在时区的时间信息的“准确”展示,那么就需要额外纳入“时区参数”
(ps: dayjs 中依赖相关内置插件,可如此获取当前所在时区: dayjs.tz.guess()
)
console.log(dayjs.tz.guess()); // -> 'Asia/Shanghai'
另外,该工具函数的另一作用是:如果数据条目存储在数据库中,时间信息是以 UTC 类型格式的存储,那么要在页面展示时间也需要手动转换到当前时区。
(一个典型的 UTC 时间信息如: 2024-01-01T08:00:00.000Z
)
(ps: dayjs 中依赖相关内置插件,可如此转换 UTC 时间到指定时区)
console.log(
dayjs
.utc("2024-01-01T08:00:00.000Z")
.tz("Asia/Shanghai")
.format("YYYY-MM-DD HH:mm:ss"),
); // -> 2024-01-01 16:00:00
我们可以借助 dayjs 提供插件以及 API,可参考:
定义如下的工具函数:
lib/date.ts
import dayjs from "dayjs";
import timezone from "dayjs/plugin/timezone";
import utc from "dayjs/plugin/utc";
export function parseDateTime(
options:
| {
date: Date | string;
timezon?: string;
}
| string;
) {
if (typeof options === "string") {
options = {date: options}
}
return dayjs.utc(options.date).tz(options.timezon ?? dayjs.tz.guess())
}
补充:常规组件展示
下面以 React 的组件定义为例
components/DateFormatter.tsx
对呈现时间信息保证交互性友好
https://blog.ninoh.cc/loc-blog/23_time-tag-useful-tip[Copy]转载或引用本文时请遵守“署名-非商业性使用-相同方式共享 4.0 国际”许可协议,注明出处、不得用于商业用途!分发衍生作品时必须采用相同的许可协议。