How to show element only on a specific date?

Design help Custom code
1

Hi! I need to show a specific element on a website only on a certain time period - how can I do it in Webflow?

2

Custom javascript is the only way you can do that, Webflow has only a filter for CMS items for now but with limited date possibilities

1 Like
3

As pietro says, if you can put it in a Collection List, and add Display From and Display To, dates, you can use collection list filtering so that it will only display between those dates. You can do that even if it’s just a single item, though it seems like overkill

If you don’t want to put it in a Collection List, you can use script to do this;

The Webflow Utils filter lib can be applied to any element.

Copy-paste the CSS and JS references in the guide above, at the bottom.

Then in your </body> custom code, add this helper function;

<script>
function helperBetweenLocalDates(dt1,dt2)
{
  const d = new Date().setHours(0,0,0,0); 
  const d1 = new Date(dt1).setHours(0,0,0,0);
  const d2 = new Date(dt2).setHours(0,0,0,0);
  
  if (d >= d1 && d <= d2) 
    return true;  

  return false;
}
</script>

On your element, add a custom attribute of;

wfu-filter= helperBetweenLocalDates('2022-11-16', '2022-12-01')

Set your dates to whatever you want. Make certain to use YYYY-MM-DD format to avoid date-parsing ambiguities.

Note;

  • When it comes to date checks, client-side scripting can only seen the user’s own system clock. Today, in most parts of the world, that’s decently accurate. Modern computers frequently sync their clocks now.
  • I’ve written the filter function to view your dates from Bob’s perspective, aka the user. If you set that element to appear between Dec-01 and Dec-02, it will appear between those dates from Bob’s perspective, That window shifts if he’s in a different timezone. As I write this, it’s Tues for my American friends, while I’m having Wed breakfast.
1 Like