对呈现时间信息保证交互性友好

正文

时间信息的呈现

<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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

虽然上面几个代码段最终在页面上的视觉呈现都是一样的，不过从用户友好交互、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

export function DateFormatter({
  dateParam,
  template = "YY/MM/DD",
  dateTimeTemplate = "YYYY-MM-DDTHH:mm:ss.SSSZ",
}: {
  dateParam: Date | string;
  template?: "YY/MM/DD" | "MM/DD" | "MM/DD/YY";
  dateTimeTemplate?: "YYYY-MM-DD" | "YYYY-MM-DDTHH:mm:ss.SSSZ";
}) {
  const dayjsEntity = parseDateTime({ date: dateParam });

  return (
    <time dateTime={dayjsEntity.format(dateTimeTemplate)}>
      {dayjsEntity.format(template)}
    </time>
  );
}

// RFComponent declare omit here.
export const DateInfoHmWrapper: RFComponent<{
  titleSrOnly?: "Published On" | "Updated On";
}> = ({ titleSrOnly = "Published On", children, className }) => {
  return (
    <dl>
      <dt className="sr-only">{titleSrOnly}</dt>
      <dd className={className}>{children}</dd>
    </dl>
  );
};

// usage demo:
<DateInfoHmWrapper>
  <DateFormatter dateParam={"2024-01-01T08:00:00.000Z"} />
</DateInfoHmWrapper>