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.
I will think about this. What do you need? After date/time, till date/time, every day/weekday?
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.
Drop down for Display Mode:
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
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>
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:
<!-- 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>
Thanks will give it a go tomorrow.
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.)?
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
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!
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.
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
Maybe this is a novice question, but how do you move this custom component into a new document?
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…
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?
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
Open Project in Elements and then you can copy and paste the component (in the editor) from one document to the other.
Thank you so much.