Use the Date/Time field to specify a date and time for Collection items.
When we add a date and time field to a collection, there's an option when we're creating the field: and that's to include a time picker.
And of course, we can use the field to manually enter a date and time. Now once we grab that info, we can use it inside collection pages or collection lists.
Here's a collection page for a blog. Let's select this text block, click in, and bind the element to the date and time field we created. And get this: there are tons of options for formatting we can select from when we bind a date and time field to an element on the page.
You can also use multiple text elements to achieve some pretty cool effects here. For instance, you can bind one of them to the day (on top), and one of them to the month on the next one down (all we're doing is, under format, selecting the format that matches the type of date we want to display), and then you can bind another one — on the third text block — to the year — so this way we have three separate styles for day, month, and year. Let's close that out.
Additionally, let's select one of the blog post collection items — and we can head on over to the Element Settings panel, and use our date and time field to configure a filter. Right now, we're using our date and time field to show items released in the last 12 months.
Let's narrow that parameter a little bit, and we'll even exclude anything released today. Press save, and the collection list updates.
Of course, we can sort by date and time as well. Simply add — and our date and time field is selected — and we can select from the dropdown to sort from newest to oldest, so all our new content shows up first.
So. We can capture the date and time, and use this content for display, or for filtering and sorting items in Collection Lists.
The date/time field is a Collection field that lets you and your Collaborators specify a date and time for a Collection Item. The values specified for the date and time field can be displayed in Collection lists or on Collection pages. You can also use the date and time field to filter and sort a Collection list or to set conditional visibility on elements in Collection lists and pages.
Common Uses
In this lesson, we talk about:
A date/time field can be added to a new or existing Collection. In Collection settings, click on New Field and then choose the Date/Time field.
You can choose to include a time picker. And as with any field, you can specify if the field is required or not.
You can set your date and time using the date and time pickers or type in a date (MM/DD/YYYY) or a date and time value (MM/DD/YYYY HH:MM AM).
As a designer, you are given multiple methods of displaying dynamic date and time values in your designs. To incorporate these values into your Collection lists and pages, you need to:
You can connect date and time values to any text element in a Collection list or a Collection page. To create and connect a date and time element:
You can also access the inner Text Settings by selecting the text element and either clicking on the settings icon next to the element label on the canvas or by going to the Settings panel (D).
You can remove the connection by unchecking the “Get text from” under Inner Text Settings.
Once you connect your date and time field to an element, you get a number of date, time, and date and time formatting options in the Format dropdown.
You can pull from the Date/Time field multiple times within your designs. This allows you to create unique layouts and designs to display divided portions of a date (days, months, and years) and time (hours). You can achieve this using multiple text elements bound to different date/time portions. For instance, you can connect one of them to the day, and one of them to the month, and then you can connect another one to the year.
If you want to create a Collection list of upcoming events for example, you can create a filter using the date and time field to show events in the future but hide past events. To do that:
The filter rules you can use with the date and time field values are:
With "Is after/before or equal to", you may:
To create a range of dates to filter, set a start and end date for your range. For example, if you want to filter from 2 weeks into the past to t2wo weeks into the future:
This pair of date filters will create a range where only the items with dates that fall between the two filters are displayed in your collection list.
Learn more about filtering Collection Lists.
You can also sort a Collection list by date and time:
With the date filter, you are hiding Collection items that don’t meet a specific date range. With conditional visibility, you can choose to show or hide specific elements, for example an upcoming event label, within your design by setting a visibility rule.
Learn more about conditional visibility.
Something went wrong while submitting the form. Please contact support@webflow.com
Got a lesson suggestion? Let us know
Need more help? Want to report a bug? Contact support
Have feedback on the feature? Submit feature feedback