Passing a Date object for the client to render

Question

Situation: web application server outputting web pages.

What is the neatest way of letting the browser render a Date object from the server using the browser's locale settings?

Currently I am using an ugly way by generating a span containing the time in milliseconds from the datum, eg:

<span class='time'>1497026760000</span>

Followed by:

$(document).ready(function() {
 $(".time").each(function(i, time) {
   var date = new Date(parseInt(time.innerText));
   time.innerText = date.toLocaleString();
 });
});

I'd recommend using the [`time` HTML Element](https://developer.mozilla.org/en/docs/Web/HTML/Element/time). That way you can format the date in a readable format, whilst keeping the milliseconds for semantics. — evolutionxbox, Jun 26 '17 at 09:50
@evolutionxbox—not sure about *you can format the date*. There are no options for setting the format, users will see whatever the browser wants to show. — RobG, Jun 26 '17 at 10:04
Probably a duplicate of [*Where can I find documentation on formatting a date in JavaScript?*](https://stackoverflow.com/questions/1056728/where-can-i-find-documentation-on-formatting-a-date-in-javascript) — RobG, Jun 26 '17 at 10:05
@RobG I want to let the user see the date/time according to his device/browser's settings. — Old Geezer, Jun 26 '17 at 10:06
@OldGeezer—you can't. *toLocaleString* doesn't necessarily follow host settings, the result is implementation dependent and varies (test Chrome, IE, Firefox and Safari). — RobG, Jun 26 '17 at 10:08

score 0 · Answer 1 · answered Jun 26 '17 at 10:29

This is likely a duplicate of Where can I find documentation on formatting a date in JavaScript?

Presumably you wish to set the value of some attribute to a time value, then replace the element content with a formatted string. You can use the HTMLTime element, but could just as easily use a span or similar element:

window.onload = function() {
  // Use span element
  var timeSpan = document.getElementById('timeSpan');
  timeSpan.textContent = new Date(+timeSpan.dataset.timevalue).toLocaleString();
  
  // Use time element
  var timeElement = document.getElementById('timeElement');
  timeElement.textContent = new Date(+timeElement.getAttribute('datetime')).toLocaleString();  
}

<!-- Use ISO 8601 string by default, replace with toLocaleString -->
<span id="timeSpan" data-timevalue="1497026760000">2017-06-09T16:46:00.000Z</span><br>
<time id="timeElement" datetime="1497026760000">2017-06-09T16:46:00.000Z</time>

However, there is no guarantee that a browser will honour the host system settings for date formatting in any respect. For me, the above shows:

6/10/2017, 2:46:00 AM in Safari
6/10/2017, 2:46:00 AM in Chrome
10/06/2017, 2:46:00 am in Firefox

So the bottom line is that you are much better to set an unambiguous format (e.g. 10 June, 2017 or June 10, 2017) than leave it up to the host to localise for you.

Your answer is what I have been doing, ie server sends a string representation of the `Date` object, browser re-parses it back to a `Date` object, and then uses one of the `Date` object's methods to show it according to browser's time zone and hopefully format. What do you mean by "leave it up to the host to localise"? — Old Geezer, Jun 26 '17 at 12:59
@OldGeezer—it means that the format used by *toLocaleString* is entirely up to the browser developers, so using it leaves localisation up to them. — RobG, Jun 26 '17 at 20:48

Passing a Date object for the client to render

1 Answers1