INTRO

INTRO

New

Intro to Dynamic Content

Intro to Dynamic Content

New

1:36

Intro to Webflow CMS

Intro to Webflow CMS

New

2:02

CMS Collections

CMS Collections

New

CMS Collections

CMS Collections

New

2:05

Importing Collection Items

Importing Collection Items

New

1:48

Designing with Collections

Designing with Collections

New

Collection List

Collection List

New

3:33

Collection Page

Collection Page

New

3:01

Modifying Collections

Modifying Collections

New

Modifying a Collection

Modifying a Collection

New

2:05

Intro to the Editor

Intro to the Editor

New

2:22

CMS Collection Fields

CMS Collection Fields

New

Plain Text Field

Plain Text Field

New

0:51

Rich Text Field

Rich Text Field

New

1:16

Image Field

Image Field

New

1:24

Video Field

Video Field

New

0:39

Email Field

Email Field

New

0:47

Link Field

Link Field

New

1:26

Phone Field

Phone Field

New

0:43

Number Field

Number Field

New

1:27

Date/Time Field

Date/Time Field

New

1:38

Switch Field

Switch Field

New

0:58

Option Field

Option Field

New

1:25

Color Field

Color Field

New

0:38

Reference Field

Reference Field

New

1:11

Multi-reference Field

Multi-reference Field

New

2:31

Advanced Dynamic Content

Advanced Dynamic Content

New

Filtering Collection Lists

Filtering Collection Lists

New

2:47

Conditional Visibility

Conditional Visibility

New

2:43

new course
CSS grid landing page tutorial (36min)

Lesson info

Lesson info

The date/time field is a CMS field used in Collections. This lets you and your Collaborators include a date and time in your Collections items, which is super handy for events of all kinds.

Explore this project

Want to dig into the project featured in this video and see how everything is put together? We've included the full project we used when making this lesson, and we've shared the link right under this very paragraph.

View and clone this projectDownload lesson assets
Clone this projectDownload project assets

Transcript

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.