# Dynamic GIF Countdown based on Date Picker field

**URL:** <https://community.hubspot.com/t/dynamic-gif-countdown-based-on-date-picker-field/115634>\
**Category:** CMS Development\
**Created:** [September 2, 2024, 12:24pm UTC](https://community.hubspot.com/t/dynamic-gif-countdown-based-on-date-picker-field/115634 "2024-09-02T12:24:19Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![PTata](https://avatars.discourse-cdn.com/v4/letter/p/3da27b/32.png) [@PTata](https://community.hubspot.com/u/PTata)\
**Post date:** [September 2, 2024, 12:24pm UTC](https://community.hubspot.com/t/dynamic-gif-countdown-based-on-date-picker-field/115634/1 "2024-09-02T12:24:19Z")

</div>

I’m working on embedding an animated GIF into an email that displays a countdown timer. The static version works perfectly using the following HTML code:

```lia-code-sample
<p style="text-align:center">
 <img style="background-color:#f8f9fa; border:hidden;" 
 src="https://www.py.it/countdown-to-2024-09-10.gif"
 alt="py" 
 rel="noreferrer" 
 width="40%">
</p>

```

This shows a countdown to September 10, 2024. However, I encountered a problem when trying to make the countdown dynamic based on a date picked from a date picker field linked to a contact’s birthday. The modified code is:

```lia-code-sample
<p style="text-align:center">
 <img style="background-color:#f8f9fa; border:hidden;" 
 src="https://www.py.it/countdown-to-{{contact.birthday}}00:00:00.gif"
 alt="py" 
 rel="noreferrer" 
 width="40%">
</p>

```

The contact.birthday field outputs the date in the dd/MM/YY format (e.g., 10/09/24 for September 10, 2024), which doesn’t work with the URL structure my GIF requires.

I’ve attempted several methods to format the date correctly, including:

{% set date\_parts = contact.birthday.split(‘/’) %}  
{% set year\_full = “20” + date\_parts[2] %}  
{% set new\_date = year\_full + “-” + date\_parts[1] + “-” + date\_parts[0] %}

And using filters like:

src=“[https://www.py.it/countdown-to-](https://www.py.it/countdown-to-){{ contact.birthday|date(‘Y-m-d’) }}00:00:00.gif”

or:

src=“[https://www.py.it/countdown-to-](https://www.py.it/countdown-to-){{ contact.birthday|dateformat(‘%d/%m/%Y’, ‘%Y-%m-%dT%H:%M:%S’) }}.gif”

None of these attempts have been successful. I would appreciate any insights or suggestions on how to correctly format the date or alternative approaches to dynamically embed a countdown GIF based on a date field.

Thank you.

---

<div class="post-metadata">

**Author:** ![GRajput](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/grajput/32/102020_2.png) [@GRajput](https://community.hubspot.com/u/GRajput)\
**Post date:** [September 2, 2024, 2:29pm UTC](https://community.hubspot.com/t/dynamic-gif-countdown-based-on-date-picker-field/115634/2 "2024-09-02T14:29:14Z")

</div>

Hi @PTata

The issue is how you have used the split filter. The correct syntax is **{% set date\_parts = module.date\_field|split(‘/’) %}**. Also even after fixing the filter, the current output is returning[null values](https://prnt.sc/b7vmrAI6tR3V).

I modified your code little bit and I think it is giving the [correct output.](https://prnt.sc/BDmgDZfiTTgv)

Here is the modified code:

```lia-code-sample
{% set date_parts = module.date_field|split('/') %}
{% set new_date = date_parts[0] %}

```

{{ new\_date }} You can directly call the date\_parts but output contains [] brackets as its an array.

I hope this will help you out. Please mark it as Solution **Accepted and Upvote** to help another Community member.  
Thanks!

---

<div class="post-metadata">

**Author:** ![PTata](https://avatars.discourse-cdn.com/v4/letter/p/3da27b/32.png) [@PTata](https://community.hubspot.com/u/PTata)\
**Post date:** [September 2, 2024, 2:57pm UTC](https://community.hubspot.com/t/dynamic-gif-countdown-based-on-date-picker-field/115634/3 "2024-09-02T14:57:42Z")

</div>

Hello, thank you for the response, but the problem persists.

When running the code:

```lia-code-sample
{% set date_parts = contact.bday_date_comunication|split('/') %}
{% set new_date = date_parts[0] %} 
 <p style="text-align:center">
 <img style="background-color:#f8f9fa; border:hidden;" 
 src="https://www.py.it/countdown-to-{{ new_date }}00:00:00.gif" 
 alt="py" 
 rel="noreferrer" 
 width="40%">
 </p>

```

The link that gets created is:  
[https://www.py.it/countdown-to-12/09/2400:00:00.gif](https://www.py.it/countdown-to-12/09/2400:00:00.gif)

---

<div class="post-metadata">

**Author:** ![GRajput](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/grajput/32/102020_2.png) [@GRajput](https://community.hubspot.com/u/GRajput)\
**Post date:** [September 3, 2024, 12:14pm UTC](https://community.hubspot.com/t/dynamic-gif-countdown-based-on-date-picker-field/115634/4 "2024-09-03T12:14:30Z")

</div>

Hi @PTata

I tried this again with a date picker field and it is working fine. I’m unbale to replicate this issue. You are using a contact property, maybe it has something to do with it.

I hope this will help you out. Please mark it as **Solution Accepted and Upvote** to help another Community member.  
Thanks!

---

<div class="post-metadata">

**Author:** ![PTata](https://avatars.discourse-cdn.com/v4/letter/p/3da27b/32.png) [@PTata](https://community.hubspot.com/u/PTata)\
**Post date:** [September 3, 2024, 4:00pm UTC](https://community.hubspot.com/t/dynamic-gif-countdown-based-on-date-picker-field/115634/5 "2024-09-03T16:00:45Z")

</div>

I found out something strange.

I don’t know why, but even if contact.bday\_date\_comunication is a date picker field, once I call it from html and I use |pprint to print its type, it outputs (string). But the split function does not work. Don’t know what else I could try.

---

<div class="post-metadata">

**Author:** ![GRajput](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/grajput/32/102020_2.png) [@GRajput](https://community.hubspot.com/u/GRajput)\
**Post date:** [September 4, 2024, 8:50am UTC](https://community.hubspot.com/t/dynamic-gif-countdown-based-on-date-picker-field/115634/6 "2024-09-04T08:50:09Z")

</div>

Hi @PTata

Rather than a split filter, I would suggest a datetimeformat filter and set the format as per your need.

`|datetimeformat('%Y-%m-%d')`

I hope this will help you out. Please mark it as **Solution Accepted and Upvote** to help another Community member.  
Thanks!