How do I add a date field to a Webflow Collection?

Add a Date/Time field

Open Collection settings for the Collection that needs a date you choose yourself. Click New Field and choose Date/Time.

You can include a time picker. You can also make the field required. Both choices are optional. Turn the time picker on when the hour matters, such as a webinar. Leave it off when only the calendar day matters. Turn Required on when every item must include a date.

Webflow already tracks date created, date published, and date modified. The date/time article says there is no need to create fields for those. Add this field for a date you pick: a future event, a past historical date, or a publication date you want to set by hand.

Example: an Events Collection needs the day of the event, which is not the day you created the item. Add a Date/Time field named Event date. Leave the time picker off. The created date can stay in Webflow's own record. The card on the site should read Event date.

Enter the date on each item

Open a Collection item and set Event date with the date picker, or type it. Without a time picker, the form Webflow documents is MM/DD/YYYY. With a time picker, you can type MM/DD/YYYY HH:MM AM.

A blank field does not invent a date. Use a future date for an upcoming event and a past date for one that already happened. The same field can hold either. A filter on the list separates them later. Save the item after the date is in. If the time picker is on, include the hour on every item you want to order by time.

Show the date on the page

The date appears when you connect the field to a text element in a Collection list or on a Collection page. Add the text element there. Check Get text from in the inner text settings. Choose the Date/Time field from the dropdown, then choose a format.

Open those settings from the cog beside the element label, or from the Settings panel with D. Uncheck Get text from to remove the connection.

You can bind the same field more than once. Webflow's date/time article says several text elements can show separate parts: the day, the month, and the year. Pick the matching format on each element. You do not add a second field for a second layout.

The format is what visitors read. The value stored on the item stays the date you entered. A card can use a long month while a compact list uses a short one, both from Event date. Change the format on the text element. Do not retype the item.

A text element on a static page, outside any Collection list, has no current item to read. Put it in the list, or on the Collection page, before you look for Get text from.

Filter the list to upcoming dates

Select the Collection list. Open the Settings panel with D. Add a filter under Collection list settings. Choose the date field, choose Is after or equal to, set the number of days to 0, and save. Webflow's article says 0 days means the filter is set to today, so the list shows events dated today or later.

The other rules are Is set, Is not set, and Is before or equal to. Is set finds items that have any date in the field. Is not set finds items that do not. For Is after or equal to, and for Is before or equal to, you can set a number of days, weeks, months, or years, and you can point that interval into the past or into the future.

A range uses two filters. Webflow's example runs from two weeks into the past to two weeks into the future: one filter is Is after or equal to, two weeks, in the past, and the second is Is before or equal to, two weeks, in the future. Only items inside both rules stay in the list.

You can sort the same list by this field. Add a sort, choose the date field, and pick oldest to newest or newest to oldest. The filter decides which items qualify. The sort decides their order. Items that fail the filter stay in the Collection. They are only hidden from that list. A second list can show past events with Is before or equal to.

You can also show or hide an element from this field inside a Collection list or on a Collection page. The date/time article describes that for a label such as Upcoming, using is, is before, or is after, compared with an exact date, a relative date, or today. Use that when the item should stay in the list. Use the filter when the item itself should drop out.

Publish an item and read the date

Publish the Collection items and the page. The text element should show the formatted date, not the field name and not a blank gap. If the list uses the today filter, an event dated yesterday should be absent, and an event dated tomorrow should appear. Reload after the publish. A stale tab can still show the old list.

If the text is empty, Get text from points at a different field, or that item has no date. If every upcoming event is missing, open Collection list settings and read the filter. A second filter can clear the list even when the dates are right.

Turn the time picker on later from Collection settings if the hour starts to matter. Fill the hour on the items that need it, publish those items, and include the time in the text format. You do not rebuild the Collection to add the hour.