Streaming live at 10am (PST)

Conditional logic in Date picker

I am using a date picker inside a CMS collection, I would like to have the ability that the date always displays the date from the day before unless I select the data manually and override this logic, any ideas how can I accomplish this in Webflow?

Are you talking about manipulating the element running inside the designer? If so there is not a method provided by Webflow. If you can code you could potentially manipulate the element with a custom plugin in your browser but that would not be supported by WF.

I want to display in the page the date of today -1 day (always the day before date) unless I decide to change and select another date manually.

Currently using the Date/Time field in the CMS Collection - The user can select any day they want but this means you will have to edit this manually everyday. Is there a way to use JS inside WF and or modify the date/time field to accomplish this?

Hey Francisco

If no date is set in a CMS item, then it doesn’t populate the innerHTML of the assigned element. You could use this to your advantage with some custom coding and “hack” your way to the solution.

Do the following:

  • On load, for each CMS item, check if assigned element has innerHTML.
  • If false, then get the date of today – 1 and append to the assigned element.
  • If true, then do nothing because the date has been manually selected.
1 Like

Hi David,

Thanks for your reply, that is exactly what I am looking for. I managed to write a small JS script and populate innerHTML with toDateString() and displayed the date -1. I have only tested this using a embebed field in a static page.

Not sure how to accomplish this inside a field in the CMS item (don’t see the option for a embed field) and do the “hack” if you can provide more details that would be awesome! Thanks for your help.

Hey Francisco

Nice to hear that you got it to work on a static page, now we need it to work for CMS items.

First and foremost, the code should be inserted before the /body tag on each page that has the CMS collection list on it. This is relevant because when you publish the site, each CMS item is hard-coded. You can see the tree in this screenshot:

In the Webflow designer the following elements are named as such:
w-dyn-list = Collection List Wrapper
w-dyn-items = Collection List
w-dyn-item = Collection Item
the child elements of w-dyn-item are all the elements you yourself add.

To target every single Collection item, you have to use a forEach loop. Inside the loop you put the conditional statement that checks each Collection items’ assigned child’s innerHTML. If false, then get the date of today – 1(assign a const to the date outside of the loop) and append to the assigned child. If true, then do nothing because the date has been manually selected.

Let’s say you have 40 Collection Items, each containing a p element with the class event-date. The code should then loop through all 40 elements with the class event-date and for each one, check if event-date has innerHTML. If not, add the date. If it does, skip adding the date and instead continue. When the loop is finished, every single item’s date should be either today - 1 or the selected date.