HTML邮件中无需JS渲染适配时区的日期时间字符串方法咨询

现有方案的局限性 #

你当前尝试使用datetime-local类型输入框的方案存在多个问题，不适合邮件场景使用：

• datetime-local输入框的标准value格式要求不带时区标识，你传入带+00:00后缀的UTC字符串不符合规范，多数客户端会直接忽略该value，展示空输入框
• 主流邮件客户端对datetime-local输入类型的支持度极低，大部分客户端会直接将其识别为普通文本输入框，仅展示原始UTC字符串，不会做任何时区转换
• 即使少数支持该类型的客户端，也会因安全限制禁用时区自动转换能力，同时disabled状态的输入框样式无法自定义，展示效果不符合邮件设计规范

可行落地方案 #

由于HTML本身是静态标记语言，没有内置获取用户本地时区、动态转换时间格式的能力，在禁用JavaScript的邮件环境下，没有完全自动转换时区的纯HTML方案，可选择以下两种折中方案：

方案1：显式标注时区+多时区参考 #

在服务端生成时间时，同时输出UTC时间和覆盖你核心用户群体的常用时区时间，标注清楚对应时区，兼容性100%，所有邮件客户端均可正常展示：

<div>
  <p>操作时间：</p>
  <ul>
    <li>UTC时间：2021-08-17 16:04:31</li>
    <li>北京时间(UTC+8)：2021-08-18 00:04:31</li>
    <li>美东时间(UTC-4)：2021-08-17 12:04:31</li>
  </ul>
</div>

用户可以自行对照自己所在时区查看对应时间。

方案2：使用<time>语义标签标注 #

你可以用HTML标准的<time>标签标注时间的语义，部分支持该标签的邮件客户端/系统会在用户hover或者长按时间的时候，自动展示转换后的本地时间，代码侵入性极低，不影响不支持该标签的客户端的展示效果：

<p>
  操作时间：
  <time datetime="2021-08-17T16:04:31.567394+00:00">
    2021-08-17 16:04:31 (UTC)
  </time>
</p>

内容的提问来源于stack exchange，提问作者Filip Jeretina