Joshua Lindsey

JavaScript Date.now() in PHP (also, test your code)

A project I’m working on has a (to me) odd requirement that some AJAX calls pass a timestamp generated on the client side. Sure, I thought, no problem. Just toss a few Date.now()s in there and be done. Because it was such a simple change — or so I thought — I didn’t bother testing it at all. After all, it was a Date.now() passed to the timestamp argument in PHP’s date() function. How simple could you get?

Well as it turns out, it’s less simple than it appears. JavaScript’s Date.now() has 13 positions of accuracy. PHP’s equivalent time() has only 10 and this is what date() expects. So when I simply passed it in, you get something super great like this:

var_dump(date('Y-m-d H:i:s', 1282053362694));
# => string(20) "42596-08-26 09:04:54"

Not quite what I wanted. The fix is as trivial as I thought the problem was in the first place:

var dateStr = Date.now().toString();
dateStr = dateStr.substr(0, dateStr.length - 3);

Lesson learned, however: Always test your code, no matter how simple and foolproof you think it is!

Protip: CSS3 Attribute Unintentional Behavior

I’ve spent the entire day trying to solve a problem in an app I’m developing. I was dynamically creating some text input elements using jQuery, like so:

$('#some_div').append('<input type="text" id="input_1" />');

However, this was rendering with some strange behavior. Namely that the text fields were unable to gain focus and be typed in. At first I thought this was due to trying to manually write out the HTML, so I tried this:

var input = $('<input/>', { type: 'text', id: 'input_1' });
$('#some_div').append(input);

Which also didn’t work. After much gnashing of teeth, I finally noticed a CSS attribute which another developer had added way up in the DOM.

#great_great_great_grandparent_of_some_div
{
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

According to the CSS3 spec, this attribute is used to control the ability of the user to select text or other elements. However, WebKit browsers also forbid text fields and textareas affected to gain focus. Gecko doesn’t seem to have this stipulation, as the code worked in Firefox from the start. It also didn’t affect a select tag that I was also adding to the div.