Expiry by Stacks4Stacks

Elements Component Development
1

Any chance someone can develop a component for Elements like Stacks4Stacks Expiry for RW Classic? It allows for the begin / end date / time for things to be displayed.

2

I will think about this. What do you need? After date/time, till date/time, every day/weekday?

1 Like
3

Hi, thank you for your response about both of my items.
Here are screen shots for Expiry 2 that Will (Stacks4Stacks) did. He is willing to do a similar component for Elements but didn’t seem too enthusiastic about Elements.

PastedGraphic-1.png
PastedGraphic-1.png298×640 25 KB

PastedGraphic-2.png
PastedGraphic-2.png319×440 16 KB

PastedGraphic-3.png
PastedGraphic-3.png322×313 15.1 KB

Drop down for Display Mode:

PastedGraphic-4.png
PastedGraphic-4.png215×156 15.6 KB

Drop down for Timezone appears to have every time zone for the world

I primarily used the Display Between Date 1 and Date 2 with Date 1 and time being just after midnight on day I need for the info to be displayed and Date 2 time being midnight of last day I wanted info to be displayed

Will didn’t have an every day / weekday / or other options like weekends or 1st and 15th of month.
I would just have to do an Expiry 2 stack for those type of choices.

Again thank you.

Charlie Kerscher
cjkerscher@me.com

4

If you drop this code into a HTML component it time controls the content. Give it a go.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Time-Limited Content</title>
</head>

<body>
  <!-- Example container element -->
  <div class="expiry" data-start="2025-11-29T00:00:00" data-end="2025-12-01T23:59:59">
    <p>This content is time-limited!</p>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const now = new Date();
      console.log("Current system date and time is: ", now);

      // Process all elements with class 'expiry'
      document.querySelectorAll('.expiry').forEach(el => {
        const start = el.getAttribute('data-start') ? new Date(el.getAttribute('data-start')) : null;
        const end = el.getAttribute('data-end') ? new Date(el.getAttribute('data-end')) : null;

        console.log(`Checking element with start: ${start} and end: ${end}`);

        // Determine visibility based on dates
        const isVisible = (!start || now >= start) && (!end || now <= end);

        console.log(`Element visibility determined: ${isVisible}`);
        // Apply visibility
        el.style.display = isVisible ? 'block' : 'none';
      });
    });
  </script>
</body>

</html>
1 Like
5

FYI: that is a full HTML page, so copy-pasting all of that code in to a Custom Component in Elements will break the page :sweat_smile:

Use just the following snippet instead:

<!-- Example container element -->
  <div class="expiry" data-start="2025-11-29T00:00:00" data-end="2025-12-01T23:59:59">
    <p>This content is time-limited!</p>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const now = new Date();
      console.log("Current system date and time is: ", now);

      // Process all elements with class 'expiry'
      document.querySelectorAll('.expiry').forEach(el => {
        const start = el.getAttribute('data-start') ? new Date(el.getAttribute('data-start')) : null;
        const end = el.getAttribute('data-end') ? new Date(el.getAttribute('data-end')) : null;

        console.log(`Checking element with start: ${start} and end: ${end}`);

        // Determine visibility based on dates
        const isVisible = (!start || now >= start) && (!end || now <= end);

        console.log(`Element visibility determined: ${isVisible}`);
        // Apply visibility
        el.style.display = isVisible ? 'block' : 'none';
      });
    });
  </script>
2 Likes
6

Thanks will give it a go tomorrow.