• Welcome to affLIFT!
    We are happy you have decided to check out our awesome affiliate marketing forum. Register your account today to join our amazing community!
  • Registration is free and you can upgrade your membership anytime to view our premium content. We also have over 100 free Public threads.

Guide Better Way to Write a Javascript Date... Welcome to 2020

Nick

Grand Guru
Community Leader
Joined
May 7, 2018
Messages
2,675
In my most recent post here on the forum, I wrote about how you should clean and test your landing pages... otherwise, you might have some big problems that will most certainly affect your conversion rate.


In that post, I mentioned that a common landing page error is using the wrong date format for the GEO that you're advertising in. Using the wrong format for the date can make your page look less authentic, making you less money.

Typically affiliates write the date using Javascript with code that's as old as dinosaurs 🦖:

JavaScript:
var d = new Date();
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
document.getElementById("date").innerHTML = months[d.getMonth()] + " " + d.getDate() + ", " + d.getFullYear();

This code would output: June 26, 2020 (date of the day this post was written)

To make the date the right format you'd have to do research for every GEO you're advertising in, and then on top of that write some nasty code (like what's above) to format the date... for each landing page.

You can write the date the exact same way with a built-in Javascript function:

JavaScript:
document.getElementById("date").innerHTML = new Date().toLocaleDateString("en", {day: "numeric", month: "short", year: "numeric"});

This code would output: June 26, 2020 (date of the day this post was written)

No giant language-specific array of months/days of the week, no thinking about how to format the date for your target GEO... just simple code that formats it how you need automatically. 😻

If you change "en" to another language you'd get outputs like this:
  • German = 26. Juni 2020
  • Spanish = 26 de junio de 2020
  • Arabic = 26 يونيو 2020

If you're ultra lazy you can just make the whole thing dynamic, which will take the language you place in the URL as a URL parameter and use that:

JavaScript:
function getURLparams(n) {
    return decodeURIComponent(
        (RegExp(n + "=" + "(.+?)(&|$)").exec(location.search) || [null])[1] ||
        ""
    );
}
document.getElementById(
    "date"
).innerHTML = new Date().toLocaleDateString(getURLparams("lang"), {
    day: "numeric",
    month: "short",
    year: "numeric",
    weekday: "long"
});

BTW that code also adds the weekday to the output. So if you used a URL parameter on your landing page like lang=en your output would now look like this:

Friday, Jun 26, 2020

Happy Friday!

Now, you know a much better way to code the date for your landing pages. Welcome to 2020 my friends. :geek:

For your reference here are the MDN docs for toLocaleDateString.

P.S. I've made a codesandbox with a bunch of examples in it. I'd embed it here, but I don't think it's possible. Take a look if you want. 👀

P.P.S. Before anyone asks... it's supported very well by the browsers. ~95% (y)
 
Last edited:

Luke

Admin
Staff member
Joined
Apr 17, 2018
Messages
12,923
Nice work, Nick! Thanks for this. It's awesome 👍
 

arif

Super Contributor
Joined
Jun 1, 2018
Messages
161
That is amazing, now i don't have to search day names and months in a particular language. Gonna go change all my landers now.
 

Nick

Grand Guru
Community Leader
Joined
May 7, 2018
Messages
2,675
That is amazing, now i don't have to search day names and months in a particular language. Gonna go change all my landers now.
LMFAO. Seems to me a lot of code-related things that affiliates use are super outdated. The web has evolved. :)
 

MattHead

Contributor
Joined
May 17, 2019
Messages
35
@Nick Thank you very much for this time-saver. I just replaced the old code but unfortunately, getting an error:

TypeError: null is not an object (evaluating 'document.getElementById("date")')
 

Nick

Grand Guru
Community Leader
Joined
May 7, 2018
Messages
2,675
@Nick Thank you very much for this time-saver. I just replaced the old code but unfortunately, getting an error:

TypeError: null is not an object (evaluating 'document.getElementById("date")')
It sounds like you don't have an HTML element with the ID "date".
 

ChrisBa

Super Contributor
Joined
Apr 30, 2018
Messages
545
Thanks for the share. I like the idea of the dynamic code.
 

Daniel Hood

Admin
Joined
Apr 17, 2018
Messages
10
If you're ultra lazy you can just make the whole thing dynamic, which will take the language you place in the URL as a URL parameter and use that:

You could also use `navigator.language` in some browsers to get the preferred language straight from the client instead of using a query string. Such as:

JavaScript:
new Date().toLocaleDateString(window.navigator.language, {
    day: "numeric",
    month: "short",
    year: "numeric",
    weekday: "long"
});
 

Nick

Grand Guru
Community Leader
Joined
May 7, 2018
Messages
2,675
You could also use `navigator.language` in some browsers to get the preferred language straight from the client instead of using a query string.
Definitely an option that I occasionally use, however, I mostly prefer to force the language... for a couple of reasons:
  1. Make sure it matches a language that my landing page translates to.
  2. Know with 100% certainty what version of the lander the user saw.
 
Top