Countdown Timer for Posts in Oxygen

In the comments section of Countdown Timer using ACF in Oxygen tutorial a member asked:

can we have the ACF time picker field elsewhere than in the Options? And how to do if i want to have more than 1 countdown on a page (within a Oxygen repeater) with time deadline located in ACF field (not in Options)?

In this members-only tutorial we shall

• add "Event Date" custom field of the type Date Time Picker to Event Custom Post Type
• show 5 latest events using a Repeater
• use pre_get_posts to limit the events to only those that are future/upcoming i.e., having the Event Date higher than today
• set the event date and time info as the value of a custom data attribute, data-countdown-date for each event
• add JavaScript to loop over the events list, pull the data attribute's value and setup countdown timer for each event

Step 1

Install and activate Advanced Custom Fields.

Go to Custom Fields > Add New.

Create a group named say, Event Fields.

Add a field having the label of say, Event Date and set the field type as "Date Time Picker".

Set your desired Display and Return formats. It need not be F j, Y H:i:s as mentioned in the earlier tutorial.

Set the field group to appear on Event CPT entries.

Step 2

Edit the Page where you would like to display the upcoming events with Oxygen.

Add a Section having a Repeater.

Set the query to this manual query:

post_type=event&posts_per_page=5&no_found_rows=true

Select the Repeater Div and add the post title and link it to permalink.

Step 3

Let us change the query so it only pulls future events.

Add a Code Block above the Repeater.

PHP & HTML: