The Date Swap component

This component is not supported for Google Ads, Google AdMob, AMPHTML ads, video ads, or image ads.

The Date Swap component helps you show different content based on the viewer's time and date, compared to the date range you specify. For example, Date Swap lets you show customized content before, on the same day as, and after a movie release.

To add the Date Swap component to your project:

1. Open the Components panel, then the Date/Time folder.
2. Drag the Date Swap component to the stage.
3. In the Properties panel, set a date range (see the Properties section below).
4. Add child elements to the component. (Learn how to nest elements.) The component shows or hides any child elements based on the date range you set. You can also set events based on the component's date range to affect elements that aren't child elements.
5. Add an event to trigger the Check date action, which lets you control when the date comparison happens. For example, you can set the date check to occur once the page is ready to display with the Page > Ready to present the page event.

Properties

Property	Description
Name	The name of the component.
Between	The start of the date range in RFC 2822 or ISO 8601 format. (See examples below.) Can be bound to dynamic data.
And	The end of the date range in RFC 2822 or ISO 8601 format. (See examples below.) Can be bound to dynamic data.

Example dates

• In RFC 2822 format:
  • 1 Jan 2018
  • 15 Jun 2018 13:30
  • 31 Dec 2018 23:59:59 +0000
• In ISO 8601 format:
  • 2018-01-01
  • 2018-06-15 13:30
  • 2018-12-31T23:59:59 +0000

If you don't specify a time zone, the viewer's local time zone will be used.

Events and actions

Events sent by the Date Swap component

You can trigger other actions based on the following Date Swap component events:

Event	Description
Before	Sent when the current date and time is before the date range specified in the properties.
During	Sent when the current date and time is within the date range specified in the properties (inclusive of the start and end of the range).
After	Sent when the current date and time is after the date range specified in the properties.

To select one of these events in the Event dialog, set the Date Swap component as the target.

To control when the date comparison happens, use the Check date action described in the next section.

Actions performed by the Date Swap component

The following Date Swap component action can be triggered in response to other events:

Action	Description
Check date	Check the current date and time against the specified date range.

When you select this action in the Event dialog, set the Date Swap component as the receiver.

Learn how to configure events.

Preview

This component can't be previewed inside the Google Web Designer interface. To see the component in action, preview your document in your preferred browser by clicking the Preview button in the upper right corner.

Testing

You can use one of the following methods to test the Date Swap component:

• Change your system clock.
• Override the current date for a single element with the currentdateoverride attribute, using RFC 2822 or ISO 8601 format:
  <gwd-dateswap from_date="2018-06-15" to_date="2018-08-15" currentdateoverride="2018-07-15">Mid-July</gwd-dateswap>