Guide A Better Way to Write a Javascript Date

[Nick]

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.

Don't Be Like This Guy... Clean Your Landing Pages AND Test Them

afflift.com

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 :

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:

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:

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 the future my friends.

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. ~98%

 

[Luke]

Nice work, Nick! Thanks for this. It's awesome

 

[Arif]

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]

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]

@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]

@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".

 

[MattHead]

Yep, that was it of course. Thank you @Nick

 

[ChrisBa]

Thanks for the share. I like the idea of the dynamic code.

 

[Daniel Hood]

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:

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

 

[Nick]

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]

Bumping this because I used it