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:
- Open the Components panel, then the Date/Time folder.
- Drag the Date Swap
component to the stage.
- In the Properties panel, set a date range (see the Properties section below).
- 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.
- 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 componentYou 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.
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
- Change your system clock.
- Override the current date for a single element with the
currentdateoverrideattribute, 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>