Skip to main content

Ralsina.Me — Roberto Alsina's website

Javascript Makes Me Cry: Turning a Date into a String

Work­ing late last night in Al­va I want­ed to do some­thing that sound­ed triv­ial:

When the page load­s, get the cur­rent date and time, and if a cer­tain in­put is emp­ty, put it there like this:

28/05/2013 23:45

So, how hard can that be, right? Well not hard, but...

Getting the current date-time is easy: now = new Date(); So, is there something like strftime in Javascript? Of course not. You can get code from the usual places and have a untested, perhaps broken, limited version of it. And I am not about to add a strftime implementation to use it once. Sure, there are a number of Date methods that convert to strings, but none of them lets you specify the output format. So, let's try to do this The Javascript Way, right?

To get the el­e­ments I want to put in the val­ue, I used ac­ces­sor meth­od­s. So, ob­vi­ous­ly, these should give me what I want for the string, right?

now.get­Day(), now.get­Mon­th(), now.getYear(), now.getH­our() now.get­Min­ute()

Well, they are, at the date men­tioned above, re­spec­tive­ly: 2, 4, 113, er­ror, er­ror

Ok, the errors are easy to fix from the docs. It's actually getHours() and getMinutes(), so now we have 2, 4, 113, 23, 45 and of those five things, the last two are what one would expect, at least. Let's go over the other three and see why they are so weird:

Date.getDay() returned 2 instead of 28

Because getDay() gives you the week day and not the day of the month. Which is absolutely idiotic. So, you have to use getDate() instead. Which means the name is a lie, becasue the logical thing for getDate() to return is the whole date.

Date.getMonth() returned 4 instead of 5

Because getMonth() returns months in the [0,11] range. Which is beyond idiotic and bordering in evil. Come on, Javascript, people have been referring to may as "5" for nearly two thousand years now! What other language does this? Anyone knows one?

Date.getYear() returned 113 instead of 2013

Because it uses offset-from-1900. Which is amazing, and I had never heard of a language doing in a standard type. Because why? So, use getFullYear() instead.

Now, armed with the right 5 num­ber­s, let's for­mat it. Does Javascript have the equiv­a­lent of sprintf or for­mat ? Of course not. In JavaScrip­t, with­out 3rd par­ty mod­ules, you cre­ate strings by ad­di­tion, like a cave­man. Again, I know I could add a for­mat method to the String pro­to­type and make this work, but I am not adding an im­ple­men­ta­tion of for­mat or sprintf just to use it on­ce!

So, this pro­duces that I wan­t:

now.getDate()+'/'+(now.getMonth()+1)+'/'+now.getFullYear()+' '+now.getHours()+':'+now.getMinutes()

Un­less... the day or month are low­er than 10, in which case it's miss­ing the left­-­padding ze­ro. Luck­i­ly, for the pur­pose I was us­ing it, it worked any­way. Be­cause OF COURSE there's no in­clud­ed func­tion to left­-­pad a string. You have to do it by ad­di­tion. Or, of course, add a 3rd par­ty func­tion that's out there, in the in­ter­net, some­where.

Striker / 2013-05-29 14:09:

I kindly direct you to http://momentjs.com/

Roberto Alsina / 2013-05-29 14:12:

Yes, I saw it mentioned, but I am not adding this: https://raw.github.com/timr... to avoid one ugly line :-)

alecu / 2013-05-29 15:31:

Mi opinión es que tenés que asumir las stdlib de javascript que implementan los browsers como lo que son: incompatibles, rotas, inútiles.

Y luego elegir para tus proyectos un par de bibliotecas buenas, como la que te sugieren acá y usar eso. Lo mismo que con CSS.

Matias Graña / 2013-05-29 14:17:

No sé si era una pregunta retórica, pero sobre otro lenguaje que sea "zero-based" para los meses, Java, en el paquete java.util.Calendar tiene ese hermoso comportamiento.

Roberto Alsina / 2013-05-29 14:21:

Argh? ;-)

Camilo Díaz Repka / 2013-05-29 14:30:

Exactamente, era parte de la movida para que "JavaScript sea lo más parecido a Java", copiado del horrible diseño de Calendar circa 1996/1998. Y como muchas otras cosas en software, simplemente quedó así.

nemo / 2013-05-29 19:39:

Your update thoughtfully does mention the origins in:
http://en.cppreference.com/...

"What other language does this? Anyone knows one?"
http://docs.oracle.com/java...
http://docs.oracle.com/java...
Is also 0-based month, 1900 based year. Perl does this too. Actually, is fairly common.

0 based month is convenient for arrays referencing month. Which was often used for, oh, localising the month string which was often the only string people had in a date.
1900 makes less sense, but common in languages from back then. Bit silly to be sure, but fairly harmless if you're aware of it.

nemo / 2013-05-29 19:41:

I'd also like to note you shouldn't use getYear in JavaScript ever, since while most browsers follow the specification and do the -1900 thing, IE8 and older do not.

Roberto Alsina / 2013-05-29 19:47:

Oh, extra fun :-)

Roberto Alsina / 2013-05-29 19:48:

Thanks for the comment!

nemo / 2013-05-29 20:46:

y = (new Array(count + 1 - x.toString().length)).join('0') + x;
For padding. Various other solutions listed here:
http://stackoverflow.com/qu...

Really though, I probably would just have called toLocaleFormat or toLocaleDateString- has advantage of being, oh, localised :)
And. Yes, the default JS API lacks a lot. Fortunately there are a ton of libs out there, so this is usually not a big deal.

nemo / 2013-05-29 21:02:

Oh... And +1 for doing server side. No reason not to support non-JS if possible.
Ok. Done now.

Roberto Alsina / 2013-05-29 21:04:

Yeah, saw some of those, and I can't describe my happiness when it worked without the padding ;-)


Contents © 2000-2020 Roberto Alsina