Date/time field

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.

Webflow automatically tracks dates and times for date created, date published, and date modified, so there’s no need to create fields for these.

Common Uses

• A date or time in the future (upcoming event, release date, etc)
• A date or time in the past (birthday, historical date, etc)
• Manually setting custom publication dates

In this lesson, we talk about:

• Creating a date/time field
• Setting dates and times
• Displaying dynamic dates and times
• Filtering a Collection list using the date/time field
• Sorting a Collection list using the date/time field
• Setting conditional visibility using the date/time field

Creating a date/time field

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.

Setting dates and times

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).

Displaying dynamic dates and times

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:

1. Connect the date and time field to a text element
2. Format the date and time values

Connecting date and time values to text elements

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:

1. Add a text element in your Collection list or page
2. Check the Get text from checkbox in the Inner Text Settings that appears
3. Select the Date/time field from the field dropdown
4. Choose a date (and time) format

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.

Formatting the date and time values

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.

Filtering a Collection list using the date and time field

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:

1. Select the Collection list you want to filter
2. Go to the Settings panel (D)
3. Add a Filter under Collection list settings
4. Select your data & time field in the first dropdown
5. Choose Is after or equal to
6. Set the number of days to 0 (it should indicate you've set this filter to today)
7. Save
   

The filter rules you can use with the date and time field values are:

1. Is Set: Looks for a collection items that have any date value set for this date field
2. Is Not Set: Looks for Collection items that don't have any date value set for this date field
3. Is after or equal to: Will filter for items set on or after the date selected
4. Is before or equal to: Will filter for items set on or before the date selected.
   
   

With "Is after/before or equal to", you may:

•  Select the number of days, weeks, months or years,
•  Select whether this date is set "into the past" or "into the future"
  

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:

1. Select the Collection list you want to filter
2. Go to the Settings panel (D)
3. Add a Filter under Collection list settings
4. Select your data & time field in the first dropdown
5. Choose Is after or equal to
6. Set the number to 2, the time interval to weeks, and in the past
7. Save
8. Add a second Filter
9. Select your date & time field again
10. Choose Is before or equal to
11. Set the number to 2, the time interval to weeks, and in the future
12. Save
    

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.

Sorting a Collection list using the date and time field

You can also sort a Collection list by date and time:

1. Select the Collection list you want to filter
2. Go to the Settings panel (D)
3. Add a Sort order under Collection List Settings
4. Select your date & time field in the first dropdown
5. Choose the sort order in the second dropdown: oldest to newest, or newest to oldest
6. Click Save

Setting conditional visibility using the date and time field

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.

1. Select the upcoming event label
2. Go to the Settings panel (D)
3. Add a Condition (when this element is visible) under Conditional visibility
4. Select your date & time field in the first dropdown
5. Choose Is after or equal to
6. Specify the number of days, months, or years (select 0 days to include today)
7. Choose in the Future
8. Click Save

Learn more about conditional visibility.