Display date on landing page text


Hello,

I require a date stamp to be visible on my landing page text. What is the java script code, is it placed before body or head etc… and how do I pull the date reference onto the page.

I have been pointed to this page https://www.w3schools.com/js/js_dates.asp but have no idea how to put it into action.

Would really be thankful for your help.

Thanks
Raj


13 replies

Userlevel 7
Badge +4

Hi there!

What kind of format would you like? We’ve used this before on customer pages and it’s really simple to set up.

Do you need the date & time, or simply the time?

Let me know and I’ll shoot you over some instructions!

We just need the date in UK format, so day/month/year.

Thanks
Raj

Userlevel 7
Badge +4

Hi Raj,

You may need to tweak the last line of the script to get the format you’re looking for.

  1. Paste into javascript “before body end tag”

<script> var months = ['January','February','March','April','May','June','July', 'August','September','October','November','December']; var today = new Date(); today.setTime(today.getTime()); document.getElementById("spanDate").innerHTML = months[today.getMonth()] + " " + today.getDate()+ ", " + today.getFullYear(); </script>

  1. Paste into custom HTML container

I got unbounce to do it, they did. I will email you a collection of some
email lead generation campaigns lets see how we can work together.

Badge

I got this to work pretty easily - but how can I control the font size and color of the date?

The custom HTML container code from Stefano’s solution is now blank; I can only assume that means the method he was using is deprecated?

I’m having the same issue - I have the JS to generate today’s date but I can’t seem to figure out how to call it from within a custom html container since JS can no longer be placed directly within them. So, I place the JS within the Script Manager & use placement ‘Before Close Body Tag’ - but then what?

Any suggestions/help would be greatly appreciated - I didn’t want to start a new thread as there are already several on this issue.

Userlevel 3

Hey there people.

Stefano workaround still works. Although is missing a couple steps.

Step 1 option A- Create a text element on the builder and make sure to save their ID. Find the ID here

Step 1 option B- Create a custom HTML element and make sure to add an ID to the element.
eg. <h1 id="newDate" style="align: center; font-weight: 100; font-family: Montserrat; font-size: 24px; color: rgb(28, 7, 7);"></h1>

option B - allows you to use CSS style inline of the date text

Step 2- Copy Stefanos’s code below as javascript and place on before body end tag

Step 3 - On the Javascript code that you just pasted, switch the word "spanDate" to your ID name.
eg. "newDate"

Userlevel 7
Badge +4

Woop! Thanks for the update 🙂

Hi Stefano,

I used this script and it worked perfectly but I wanted to add a date range. How can I get tomorrow’s date? For example, January 9 -10 , 2020

Thanks in advance,
Azin

Userlevel 7
Badge +1

Hi @Azin_Rouhafzaie!

I did a quick search and this might give you what you need:

<script type="text/javascript">
           var months = ['January','February','March','April','May','June','July',
'August','September','October','November','December'];       
var tomorrow = new Date();
tomorrow.setTime(tomorrow.getTime() + (1000*3600*24));       
document.getElementById("spanDate").innerHTML = months[tomorrow.getMonth()] + " " + tomorrow.getDate()+ ", " + tomorrow.getFullYear();
    </script>

That’ll give you tomorrow’s date 🙂

Hope this helps!

Hey @BrunaGarcia,

I tried using Step 1 option B

but the font size and color are not changing for me appropriately. When I update the font color and style nothing happens. The default font stays the same.

Is there a way to always show 7PM Monday 14th June for example and then every monday same time every week?

Hello! We can dynamically update the date on our pages for desktop (and adjust the font etc) but we cannot display this correctly on mobile. Any suggestions here?

What happens for us is: The date is called using javascript+html but if we try to duplicate the code box for mobile, nothing displays.

Reply