Open navigation menu

Time Element for Dates

Uses the time element with datetime attribute to represent dates and times in a machine-readable format for scheduling and display.

HtmlData Integrity

Code

snippet
<article>
  <p>Published: <time datetime="2025-01-15">January 15, 2025</time></p>
  <p>Updated: <time datetime="2025-01-16T14:30:00-05:00">Jan 16, 2025 at 2:30 PM</time></p>
  <p>Event: <time datetime="2025-03-01T09:00">March 1, 2025 at 9 AM</time></p>
  <p>Duration: <time datetime="PT2H30M">2 hours 30 minutes</time></p>
  <p>Weekly: Every <time datetime="2025-01-13">Monday</time></p>
</article>

<time datetime="2025-01-15">1/15/2025</time>
<time datetime="2025-01-15T10:00:00Z">10:00 UTC</time>
<time datetime="2025-07-04">Independence Day</time>

<time datetime="PT1H">1 hour</time>
<time datetime="PT30M">30 minutes</time>
<time datetime="P1DT12H">1 day 12 hours</time>

<time datetime="2025-01-15" pubdate>Published Jan 15</time>

<script>
  const times = document.querySelectorAll('time[datetime]');
  times.forEach(t => {
    const date = new Date(t.dateTime);
    const relative = getRelativeTime(date);
    t.title = relative;
  });

  function getRelativeTime(date) {
    const diff = date - new Date();
    const days = Math.round(diff / 86400000);
    return days === 0 ? 'Today' : days > 0 ? `In ${days} days` : `${-days} days ago`;
  }
</script>