Time/Date Selection Field

The time/date selection field is a Collection field that enables you and your Co-workers to define a specific time and date for a Collection Item. The specified time and date values can be showcased in Collection lists or on Collection pages. This field can also be used for arranging and organizing a Collection list or for establishing conditional visibility on elements in Collection lists and pages.

Webflow automatically monitors creation dates, publication dates, and modification dates, eliminating the need to create separate fields for these.

Usual Applications

• A future date or time (such as an upcoming event or release date)
• A past date or time (like a birthday or historical event)
• Manually defining custom publication dates

This guide covers:

• Establishing a time/date selection field
• Defining dates and times
• Showcasing dynamic dates and times
• Filtering a Collection list with the time/date field
• Ordering a Collection list with the time/date field
• Implementing conditional visibility using the time/date field

Establishing a time/date selection field

You can integrate a time/date selection field into a new or existing Collection. Within Collection settings, click on New Field and then select the Time/Date field.

You have the option to include a time selector. Additionally, as with any field, you can specify whether the field is mandatory or not.

Defining dates and times

You can establish your date and time using the provided pickers or manually input a date (MM/DD/YYYY) or a date and time value (MM/DD/YYYY HH:MM AM).

Showcasing dynamic dates and times

Designers have multiple techniques for displaying dynamic date and time values in designs. To incorporate these values into Collection lists and pages:

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

Linking date and time values to text elements

You can attach date and time values to any text element within a Collection list or page. To create and link a date and time element:

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

You can access the Inner Text Settings by clicking on the settings icon beside the element label on the canvas or by navigating to the Settings panel (D).

To disconnect the link, deselect the “Retrieve text from” option under Inner Text Settings.

Formatting the date and time values

After linking your date and time field to an element, various date, time, and date/time formatting choices are available in the Format dropdown.

You can use the Date/Time field multiple times in your designs. This allows for crafting unique layouts and designs to exhibit segmented portions of a date (days, months, and years) and time (hours). You can achieve this by linking multiple text elements to different date/time segments. For instance, link one to the day, another to the month, and a third one to the year.

Filtering a Collection list with the time/date field

If you aim to create a Collection list of forthcoming events, for example, you can apply a filter utilizing the time/date field to display future events while concealing past ones. To achieve this:

1. Select the Collection list requiring the filter
2. Access the Settings panel (D)
3. Add a Filter within Collection list settings
4. Select your time & date field in the initial dropdown
5. Opt for Is after or equal to
6. Specify the number of days as 0 (to signify filtering for today)
7. Save

The filter conditions that can be utilized with the time/date field values include:

1. Is Set: Seeks Collection items with a defined date for this date field
2. Is Not Set: Locates Collection items lacking a specified date for this field
3. Is after or equal to: Filters items set on or after the chosen date
4. Is before or equal to: Filters items set on or before the chosen date.

For “Is after/before or equal to,” you can:

• Select the time frame (days, weeks, months, or years)
• Choose whether the date is set “in the past” or “in the future”

To create a date range for filtering, designate a start and end date for your range. For instance, to filter from 2 weeks before to 2 weeks after:

1. Select the Collection list for filtering
2. Access the Settings panel(D)
3. Include a Screen within Assembly list configurations
4. Pick your information & time field in the primary dropdown menu
5. Select Is after or equal to
6. Establish the quantity to 2, the duration to weeks, and formerly
7. Preserve
8. Integrate a second Display
9. Pick your meeting & time field again
10. Select Is before or equal to
11. Determine the quantity to 2, the duration to weeks, and in the future
12. Preserve
    

This duo of date screens will establish a series where only the items with dates within the two screens will be exhibited in your assembly list.

Get further details on filtering Assembly Lists.

Arranging a Group list utilizing the date and time field

You can also organize a Group list by date and time:

1. Select the Group list you wish to sift
2. Head to the Configurations panel (D)
3. Add a Sequence under Assembly List Configurations
4. Pick your date & time field in the primary dropdown menu
5. Opt for the sequence in the secondary dropdown menu: oldest to newest, or newest to oldest
6. Press Preserve

Establishing provisional perception utilizing the date and time field

By applying the date screen, you are obscuring Group components that fail to adhere to a particular date range. With provisional perception, you can select to disclose or conceal particular elements, e.g., an impending event label, within your design by choosing a perceptibility regulation.

1. Select the impending event label
2. Head to the Configurations panel (D)
3. Add a State (when this element is exposed) under Provisional perceptibility
4. Pick your date & time field in the primary dropdown menu
5. Select Is after or equal to
6. Determine the quantity of days, months, or years (select 0 days to include today)
7. Select in the Future
8. Press Preserve

Get further details on provisional perception.