600 West

Time 

<time id="" datetime="" class="Time " style="">
  	<p id="" class="" >
    Tuesday, March 6, 2018 12pm
</p>

</time>
 
<time id="{{id}}"
      datetime="{{datetime}}"
      class="Time {{modifier}}"
      style="{{style}}"
      {{#if webinarid}}data-webinar-id="{{webinarid}}"{{/if}}
>
  {{> @children}}
</time>
 
{
  "id": null,
  "modifier": null,
  "style": null,
  "datetime": null,
  "webinarid": null,
  "children": [
    {
      "component": "p",
      "context": {
        "text": "Tuesday, March 6, 2018 12pm"
      }
    }
  ]
}
  • Content: 
    import React from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';

const Time = (props) => {
    return(
        <time
            id={props.id}
            className={cx(['Time', props.modifier])}
            dateTime={props.datetime}
            data-webinar-id={`${props.webinarid ? props.webinarid : ''}`}
        >
            {render(props.children)}
        </time>
    );
};

Time.propTypes = {
    id: PropTypes.string,
    modifier: PropTypes.string,
    dateTime: PropTypes.string,
    webinarid: PropTypes.string
};

export default Time;
  • URL: /components/raw/time/Time.jsx
  • Filesystem Path: components/atoms/Time/Time.jsx
  • Size: 576 Bytes

Time

The time element will render a <time> tag and should be used to show a timestamp. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time.

Best Practices

  • A <time> tag should always include a datetime attribute. This attribute indicates the time and date of the element and must be a valid date with an optional time string. If the value cannot be parsed as a date with an optional time string, the element does not have an associated time stamp.