Building a custom date display from Scratch (Part 1)
Date object that represents a single moment in time in a platform-independent format. This object contains a
Number that represents the milliseconds since the 1st of January of 1970 UTC.
We can test what that would look like by calling
Thank you for reading! Comment, share and turn on the notification icon for more!
Wait, obviously we’re still not there yet!
Date objects have access to several methods available to obtain a date in various formats. At first glance, the number of milliseconds elapsed since January 1, 1970 00:00:00 UTC isn't all that useful in creating a date display. However, it is important to note that most of the functions output the date and time in Coordinated Universal Time (UTC), whereas the user's device provides the local time. Which brings us to the question...
How to build a custom date display?
Step 1: Setting criteria
Date.now() gives us the number of milliseconds elapsed since January 1, 1970 00:00:00 UTC. However, to get a running time display (as a normal clock would work) we need to be able to do and establish the following criteria: i) how are we formatting
Date.now() to get human-readable data and ii) how often are we updating our time display.
For this exercise, we will format in a United States English locale and we will update our timer every second (as opposed to every minute). In short, we would like to get the following result:
Step 2: Formatting
Even though the
Intl object which also happens to provide standardised language-sensitive date and time formatting. Let's take a look how does it format our current milliseconds logging to the console its result.
Note that the
Intl.DateTimeFormat() constructor's syntax gives us the option to pass several different locales and options to essentially extract from
Date.now() the data we need. Alternatively, we could define the options parameter independently to get more granular results.
Step 3: Updating the time
There is really no single approach on how to update the time. Among the popular options:
setTimeout(), I'd recommend using the former rather than the latter due to their recursive timeouts. The difference may seem insignificant, but
setInterval() includes the time taken to execute the code you want to run, as opposed to
setTimeout() which does the exact opposite.
Let’s say that you choose to display the time every second (1000 milliseconds) and your code takes 50 milliseconds to run — here’s what would end up happening with each of these two options:
setInterval()— would execute your code every 1000 milliseconds
setTimeout()— would execute your code every 950 milliseconds
Therefore, if you choose
setTimeout() and hypothetically it always constantly takes 50 milliseconds to run your code, after a minute your time would be 3 seconds off. After an hour, it would be 3 minutes off, being not as precise as we would like. Using the
setInterval() method, is as simple as passing as the first parameter the code to execute and as the second parameter the time delay in milliseconds.
Play with it. Feel free to use several different
option parameters in
Intl.DateTimeFormat() to display the date and time in any way you need. Also keep in mind that code shown above runs in the console, if you replace the
return you can pass the data to a DOM object by selecting the node in the
timeDisplay IIFE. Here's what that would look like:
Thank you for reading!
Codepen: The Date Object
Get in touch: