Building a custom date display from Scratch (Part 1)
How do I get the date and time in JavaScript?
Popular question…
Google: How do I get the date and time in JavaScript?
If this if you, you’re in luck! JavaScript has a 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 Date with now():
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?
First, let’s get something straight. Most tutorials out there are way overthinking how to do this. Today, as part of this series, we are going to take the first step and build a simple but code-effective time display to understand the building blocks and fundamentals of the JavaScript Date object.
Step 1: Setting criteria
Calling 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 Date.now()
Even though the Date object has several methods available to accomplish this task, we will opt to use JavaScript's 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: setInterval() and 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 millisecondssetTimeout()— 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. setInterval(code, [delay]).
Final thoughts
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 timeGenerator function's console.log for 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:
Whatsapp
ekheinquarto@gmail.com
Instagram
