• 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

Well-known member
Community Leader
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:

Nick

Well-known member
Community Leader
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

Member
@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")')
 
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"
});
 
Top