在 html5 <time> 元素的 datetime 属性中同时使用日期和持续时间答案

【问题标题】：Using both date and duration in html5 <time> element's datetime attribute在 html5 <time> 元素的 datetime 属性中同时使用日期和持续时间
【发布时间】：2015-02-04 16:00:14
【问题描述】：

我有一个事件列表，每个事件都有一个开始日期和一个结束日期，我想使用 html5 <time> 元素使列表在语义上更丰富。

我发现我可以使用datetime 属性来提供机器可读的时间，如下所示：

<time datetime="2015-02-21">my birthday</time>

我还发现该属性支持这样的持续时间：

<time datetime="P2D">two days</time>

但是，我无法找到将两者组合在一个 <time> 元素中的正确方法，例如，显示从 2 月 21 日开始并持续两天的事件。

我可以简单地使用由空格分隔的日期和持续时间吗：

<time datetime="2015-02-21 P2D">21.-23. February</time>

或者正确的方法是使用两个<time> 元素？

<div>
 <time datetime="2015-02-21">21.</time>
 -
 <time datetime="2015-02-23">23.</time>
 February
</div>

【问题讨论】：

标签： html datetime time semantics

【解决方案1】：

似乎没有办法将特定日期字符串或时间字符串与持续时间字符串组合在单个 <time> 元素中。 spec 建议使用两个 <time> 元素来代替：

代码示例：

时间元素可用于对日期进行编码，例如以微格式编码。下面显示了一种使用 hCalendar 上使用时间元素的变体对事件进行编码的假设方式：
<div class="vevent">
 <a class="url" href="http://www.web2con.com/">http://www.web2con.com/</a>
  <span class="summary">Web 2.0 Conference</span>:
  <time class="dtstart" datetime="2005-10-05">October 5</time> -
  <time class="dtend" datetime="2005-10-07">7</time>,
  at the <span class="location">Argent Hotel, San Francisco, CA</span>
 </div>

与您的示例非常匹配。

【讨论】：

谢谢，这回答了我的问题！我想我会使用我在问题中针对这个特定案例提供的确切代码示例。
我不知道我是否会说dtstart 和dtend 不传达任何语义价值。必须使用这些类名才能将其解析为 hCalendar 事件。因此，虽然它们对于普通的 <time> 标记不是必需的，但它们确实为微格式解析器传达了额外的语义价值。
@jasonkarns：啊，我没有意识到这一点。甚至规范都是这么说的。谢谢指正。

【解决方案2】：

你想要这样的东西吗？

  <input type="date" min="2015-02-21" max="2015-02-23"/>
  
  <input type="date" min="2015-02-21" max="2015-02-23"/>
	February

但是目前不兼容ie和firefox。你最好改用js dateSelector 插件。

【讨论】：

我怀疑 - 他们没有制作表格。
@BoltClock 是正确的 - 我只是对显示日期信息的方式感兴趣