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

Question

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

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

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

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

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

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

我可以简单地使用由 space:

分隔的日期和持续时间吗

<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>

Answer 1

你想要这样的东西吗？

  <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插件。

Answer 2

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

Code Example:

The time element can be used to encode dates, for example in microformats. The following shows a hypothetical way of encoding an event using a variant on hCalendar that uses the time element:
<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>

与您的示例非常匹配。

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

Using both date and duration in html5 <time> element's datetime attribute

html

time

datetime

semantics