• 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!
  • ADxAD โ€” Advertising Network for Asian, Tier-1, and worldwide traffic. We offer traffic for several mainstream verticals: Gambling, Gaming, Dating, Nutra, Betting, Crypto and others. ADxAD is all about growing your online success!
    Join ADxAD Today

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

GG

Nick

๐Ÿง™๐Ÿปโ€โ™‚๏ธ Wizard ๐Ÿ”ฎ
Staff Member
Community Leader
Joined
May 7, 2018
Messages
3,718
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:
RedTrack Black Friday Discount

Luke

Admin
Staff Member
Community Leader
Joined
Apr 17, 2018
Messages
16,874
Nice work, Nick! Thanks for this. It's awesome ๐Ÿ‘
 

Arif

Super Contributor
Joined
Jun 1, 2018
Messages
327
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

๐Ÿง™๐Ÿปโ€โ™‚๏ธ Wizard ๐Ÿ”ฎ
Staff Member
Community Leader
Joined
May 7, 2018
Messages
3,718
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

Super Contributor
Joined
May 17, 2019
Messages
37
@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

๐Ÿง™๐Ÿปโ€โ™‚๏ธ Wizard ๐Ÿ”ฎ
Staff Member
Community Leader
Joined
May 7, 2018
Messages
3,718
@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
13
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

๐Ÿง™๐Ÿปโ€โ™‚๏ธ Wizard ๐Ÿ”ฎ
Staff Member
Community Leader
Joined
May 7, 2018
Messages
3,718
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.
 

Luke

Admin
Staff Member
Community Leader
Joined
Apr 17, 2018
Messages
16,874
Bumping this because I used it :D
 
Top