Time Sensitive

This component allows you to show or hide content based on the provided datetime(s). By default, all nodes inside are visible. This could result in leaking information inadvertantly. If you need to make absolutely sure that info does not get leaked, you'll need to provide your own mechanism.

Basic Usage

Wrap your content in the time-sensitive component, providing either the start-day attribute, doomsday attribute, or both. They conform to the ISO 8601 spec for describing dates and time.

Copy
html
<ap-time-sensitive start-day="2020-01-01" doomsday="2037-01-01">
    <p>
        This content is only visible from the first day of 2020 up to the first
        day of 2037
    </p>
</ap-time-sensitive>
Expand

If the start-day attribute is provided, the element and its contents will be visible until the JavaScript containing the behavior for the element is run, after which point it will be hidden in the standard page rendering (though still visible for anyone who looks at the source code or DOM for the page). When used in this way, make sure that the information inside is okay to be leaked in this matter.

If the doomsday attribute is provided, the element and its contents will be visible until the date specified in the attribute. After that datetime, the element and its contents will be irreversibly removed.

Both attributes can be used together to create a time window for the element and its contents.

Examples

Considerations

If you set the display propery on the element, make sure that it can be overridden by the element's default behavior, which is to set display: none; on the style attribute whenever the conditions for displaying the content are not met.