# Expiry Component

**URL:** <https://forums.realmacsoftware.com/t/expiry-component/52968>\
**Category:** Elements API\
**Created:** [December 4, 2025, 2:42am UTC](https://forums.realmacsoftware.com/t/expiry-component/52968 "2025-12-04T02:42:22Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![cjk](https://avatars.discourse-cdn.com/v4/letter/c/eb9ed0/32.png) [@cjk](https://forums.realmacsoftware.com/u/cjk)\
**Post date:** [December 4, 2025, 2:42am UTC](https://forums.realmacsoftware.com/t/expiry-component/52968/1 "2025-12-04T02:42:22Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Ulrich](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ulrich/32/29764_2.png) [@Ulrich](https://forums.realmacsoftware.com/u/Ulrich)\
**Post date:** [December 4, 2025, 2:58pm UTC](https://forums.realmacsoftware.com/t/expiry-component/52968/2 "2025-12-04T14:58:25Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![cjk](https://avatars.discourse-cdn.com/v4/letter/c/eb9ed0/32.png) [@cjk](https://forums.realmacsoftware.com/u/cjk)\
**Post date:** [December 4, 2025, 4:31pm UTC](https://forums.realmacsoftware.com/t/expiry-component/52968/3 "2025-12-04T16:31:19Z")

</div>

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](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/7/1/719a372202548de73d882ffec749f6a62a1c212d.png)  
 ![PastedGraphic-2.png](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/b/d/bd29fbed75b57d66eb191d62ffdde228f191aa34.png)

 ![PastedGraphic-3.png](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/5/e/5e47d43e2ae713ec585e452368e146ef95916f95.png)

Drop down for Display Mode:

 ![PastedGraphic-4.png](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/8/4/8484e563ea56c208495d007789010082688b4b45.png)

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](mailto:cjkerscher@me.com)

---

<div class="post-metadata">

**Author:** ![PMUK](https://avatars.discourse-cdn.com/v4/letter/p/7993a0/32.png) [@PMUK](https://forums.realmacsoftware.com/u/PMUK)\
**Post date:** [December 4, 2025, 5:22pm UTC](https://forums.realmacsoftware.com/t/expiry-component/52968/4 "2025-12-04T17:22:12Z")

</div>

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

```auto
<!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>

```

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [December 4, 2025, 7:50pm UTC](https://forums.realmacsoftware.com/t/expiry-component/52968/5 "2025-12-04T19:50:20Z")

</div>

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 😅

Use just the following snippet instead:

```php-template
<!-- 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>

```

---

<div class="post-metadata">

**Author:** ![PMUK](https://avatars.discourse-cdn.com/v4/letter/p/7993a0/32.png) [@PMUK](https://forums.realmacsoftware.com/u/PMUK)\
**Post date:** [December 4, 2025, 8:46pm UTC](https://forums.realmacsoftware.com/t/expiry-component/52968/6 "2025-12-04T20:46:35Z")

</div>

Thanks will give it a go tomorrow.

---

<div class="post-metadata">

**Author:** ![dropgates](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dropgates/32/34206_2.png) [@dropgates](https://forums.realmacsoftware.com/u/dropgates)\
**Post date:** [March 21, 2026, 10:47pm UTC](https://forums.realmacsoftware.com/t/expiry-component/52968/7 "2026-03-21T22:47:32Z")

</div>

Does this only work when the content is written directly inside the HTML, or can it be used with regular Elements components too (like Markdown, containers, etc.)?

---

<div class="post-metadata">

**Author:** ![cjk](https://avatars.discourse-cdn.com/v4/letter/c/eb9ed0/32.png) [@cjk](https://forums.realmacsoftware.com/u/cjk)\
**Post date:** [July 31, 2026, 11:50am UTC](https://forums.realmacsoftware.com/t/expiry-component/52968/8 "2026-07-31T11:50:14Z")

</div>

Paul, thanks for your previous help. Due to my wife’s medical issues I am just now able to try what Ben suggested. Unfortunately due to my ignorance I don’t know how to get his suggestion to actually work; namely to display an element (for example Text) for a set period of time like for a week. Would you be able to help me? Thanks Charlie

---

<div class="post-metadata">

**Author:** ![PMUK](https://avatars.discourse-cdn.com/v4/letter/p/7993a0/32.png) [@PMUK](https://forums.realmacsoftware.com/u/PMUK)\
**Post date:** [July 31, 2026, 12:16pm UTC](https://forums.realmacsoftware.com/t/expiry-component/52968/9 "2026-07-31T12:16:19Z")

</div>

Charlie, as a nurse I can empathise with your wife’s issues, please send her my regards. Sadly as a 70 year old I have forgotten what I did of you but if you put a link to a demo project you’d like with I will see if I can help, if not someone else will jump in. Take care!

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [July 31, 2026, 12:18pm UTC](https://forums.realmacsoftware.com/t/expiry-component/52968/10 "2026-07-31T12:18:21Z")

</div>

Hey @cjk,

I turned this into a quick custom component for you with the help of AI. It has a drop zone in it so you can place whatever you need inside, in the demo project it just has some text.

👉 [Open Project in Elements](elementsapp://downloadDocument/LbzkyWPPn0V6)

 ![CleanShot 2026-07-31 at 1 .15.58@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/5/9/59ebd5d4c4bd45eccb7e2ed64f5e4c5f4c281a62.jpeg)

---

<div class="post-metadata">

**Author:** ![cjk](https://avatars.discourse-cdn.com/v4/letter/c/eb9ed0/32.png) [@cjk](https://forums.realmacsoftware.com/u/cjk)\
**Post date:** [July 31, 2026, 1:34pm UTC](https://forums.realmacsoftware.com/t/expiry-component/52968/11 "2026-07-31T13:34:09Z")

</div>

Thank you so very much.  
I’ve been needing this component as well as a component for “embedded” pdf’s. I used both of these stacks in Classic for my website and need them to convert to Elements (at least in inexperienced opinion)

Charlie Kerscher  
[cjkerscher@me.com](mailto:cjkerscher@me.com)

---

<div class="post-metadata">

**Author:** ![nashmoto](https://avatars.discourse-cdn.com/v4/letter/n/aca169/32.png) [@nashmoto](https://forums.realmacsoftware.com/u/nashmoto)\
**Post date:** [July 31, 2026, 8:22pm UTC](https://forums.realmacsoftware.com/t/expiry-component/52968/12 "2026-07-31T20:22:35Z")

</div>

Maybe this is a novice question, but how do you move this custom component into a new document?

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [July 31, 2026, 9:42pm UTC](https://forums.realmacsoftware.com/t/expiry-component/52968/13 "2026-07-31T21:42:48Z")

</div>

You can copy and paste the component from one document to the other. Just make sure you have the component selected in the Editor, and that the editor is active when you paste it into the other document, like this…

---

<div class="post-metadata">

**Author:** ![meonmac](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/meonmac/32/36720_2.png) [@meonmac](https://forums.realmacsoftware.com/u/meonmac)\
**Post date:** [August 1, 2026, 6:25am UTC](https://forums.realmacsoftware.com/t/expiry-component/52968/14 "2026-08-01T06:25:22Z")

</div>

This is great! Just what I was looking for.

BTW, any chance for one place where Dan’s super quick custom components could be collected? Like Chart, like this one and most probably plenty others somewhere deep in Forum topics I have not seen. Or will these be eventually implemented?

---

<div class="post-metadata">

**Author:** ![cjk](https://avatars.discourse-cdn.com/v4/letter/c/eb9ed0/32.png) [@cjk](https://forums.realmacsoftware.com/u/cjk)\
**Post date:** [August 13, 2026, 9:57am UTC](https://forums.realmacsoftware.com/t/expiry-component/52968/15 "2026-08-13T09:57:05Z")

</div>

Dan, I had a bit of an issue with my MacBook Air computer. How do I get your Expiry component installed in my Elements? Thank you, Charlie

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [August 13, 2026, 10:00am UTC](https://forums.realmacsoftware.com/t/expiry-component/52968/16 "2026-08-13T10:00:32Z")

</div>

👉 [Open Project in Elements](elementsapp://downloadDocument/LbzkyWPPn0V6) and then you can copy and paste the component (in the editor) from one document to the other.

---

<div class="post-metadata">

**Author:** ![cjk](https://avatars.discourse-cdn.com/v4/letter/c/eb9ed0/32.png) [@cjk](https://forums.realmacsoftware.com/u/cjk)\
**Post date:** [August 13, 2026, 10:05am UTC](https://forums.realmacsoftware.com/t/expiry-component/52968/17 "2026-08-13T10:05:08Z")

</div>

Thank you so much.