如何用纯HTML实现显示本地时间并提交带时区的ISO格式时间？

核心结论 #

没有原生HTML输入组件能无需JavaScript就同时实现：

• 默认显示本地时间
• 提交带时区信息的ISO格式时间

为什么现有组件不满足需求 #

• <input type="datetime-local">：仅处理本地日期时间，提交的值是不带时区的ISO 8601格式（如2024-05-20T14:30），不会包含时区偏移信息。
• <input type="time">：仅捕获小时和分钟，提交的值为HH:mm格式，完全没有日期和时区信息。
• 已废弃的<input type="datetime">：曾支持时区，但现在所有现代浏览器都已移除对它的支持，不能再使用。

无JavaScript的可行方案（依赖服务器端渲染） #

如果你的页面是服务器端生成的，可以通过以下方式实现需求：

1. 在服务器端生成当前时间的带时区ISO字符串（如2024-05-20T14:30+08:00），将其存入一个隐藏的<input>字段。
2. 同时生成对应的本地时间字符串（如14:30），填充到用于显示的<input type="time">中，供用户查看或修改。
3. 表单提交时，服务器接收隐藏字段中的带时区时间值。

示例代码：

<form action="/save/" method="post">
  <label for="display-time">Local Time: </label>
  <input id="display-time" type="time" name="display-time" value="14:30">
  <!-- 服务器端动态填充value为当前带时区ISO时间 -->
  <input type="hidden" name="time-with-timezone" value="2024-05-20T14:30+08:00">
  
  <label for="submit">Save Time</label>
  <input id="submit" type="submit">
</form>

这种方案完全不需要JavaScript，但依赖服务器在页面渲染时动态生成时间值。如果你的页面是纯静态的，无法依赖服务器端渲染，那几乎不可能完全避开JavaScript来实现需求——因为HTML本身没有能力动态获取客户端的当前本地时间和时区信息。

关于你提到的CSS截断显示的思路 #

这个思路不可行，因为HTML输入组件的value格式是由其type严格限制的：

• <input type="time">只能接受HH:mm格式的字符串，无法识别完整的带时区ISO字符串。
• 即使强行传入非法格式的值，浏览器也会忽略或清空该值，无法正常显示。

内容的提问来源于stack exchange，提问作者John Robinson