I've been using libraries like Date-fns for a long time whenever I need to format dates in JavaScript. But it becomes pretty strange when I try this in tiny applications that require basic date formats like those provided by JavaScript by default.
Most developers, I realized, do this frequently. And I used to believe that this was the best approach until I discovered that we don't always need to utilize libraries to format dates in JavaScript.
If you want to give it a go, here's the code:
After you've tried it in your own code and confirmed that it works, let's look at why it works and discover some alternative ways to format dates in JavaScript using only one line of code.
Date Formatting in JS
Getting the date in JavaScript is normally not difficult, however formatting these dates to fit your project might be difficult for novices. As a result, the majority of individuals end up utilizing libraries.
The new Date() object is the most often used technique for obtaining the date in JavaScript.
When you call new Date() in your terminal, it defaults to using your browser's time zone and displaying the date as a complete text string, such as Fri Jul 02 2021 12:44:45 GMT+0100 (British Summer Time).
However, including something like this on your web page or application is unprofessional and difficult to understand. As a result, you are forced to explore for better methods to structure these dates.
Let's look at various methods that work with a date object.
JavaScript Date Methods
There are several methods that may be applied to the date object. These methods can be used to retrieve information from a date object. Here are a few examples:
- getFullYear() returns the current year as a four-digit value (yyyy)
- getMonth() returns the current month as a number (0-11)
- getDate() returns the current date as a number (1-31)
- getHours() returns the current hour (0-23)
- And much more...
Unfortunately, most of these approaches still need a significant amount of code to convert the dates to the desired format.
For instance, new Date ().getMonth() returns the number 6, which represents July. To utilize July in my project, I'll need to write extensive code like this, which can be tedious:
Let's look at two approaches for formatting dates in the best way possible so that you may utilize them for your projects.
JavaScript's toDateString() method
The toDateString() function in JavaScript returns the date component of a date object as a string in the following format:
- The first three letters in the name of a weekday
- The initial three letters of the month's name
- Two-digit month day, padded on the left by a zero if necessary
- Year (at least four digits), padded on the left with zeros if necessary
One significant disadvantage of this strategy is our inability to modify the date output as we like.
For example, it does not allow us to display dates in our native language. Let's look at another way that, in my opinion, is still one of the greatest.
The toLocaleDateString() function
In JavaScript, the toLocaleDateString() function returns the date object as a string using local standards. It also accepts parameters as arguments, allowing you/your apps to tailor the function's behavior.
Syntax:
Let's look at few cases and their results:
You can also choose not to utilize locales or options:
You can also choose to solely utilize locales. Based on my browser's time zone, this will produce the same results as the prior.
You can also choose to change the choices as you see fit. There are four fundamental options:
- weekday — This returns the day of the week in the format you choose (short or long).
- year — This function returns the year as a number.
- month — This returns the month of the year in the format you choose (short or long).
- day – Finally, this produces a number representing the day.
Closing and Buy Me a Coffee
There are about seven formatting options available for the date object. Each of these approaches provides a distinct value:
- Fri Jul 02 2021 14:03:54 GMT+0100 is returned by toString() (British Summer Time)
- Fri Jul 02 2021 is returned by toDateString().
- 7/2/2021, 2:05:07 PM is returned by toLocaleString().
- toLocaleDateString() returns 7/2/2021.
- Fri, 02 Jul 2021 13:06:02 GMT is returned by toGMTString().
- Fri, 02 Jul 2021 13:06:28 GMT is returned by toUTCString().
- toISOString() returns the value 2021-07-02T13:06:53.422Z.
If you want more complicated date formats, you will need to build your own. Check out the resources listed below to learn how to generate unique date formats.
Resources of Use
- Date in JavaScript: Everything You Need to Know
- JavaScript - How to Format Date in JavaScript
- In JavaScript, how do you format a date?
- DateTime Manipulation: The Definitive Guide
Top comments (0)