Natively Format JavaScript Dates and Times

Elijah Manor: [0:01] First, we'll create a new Date() that we'll use the format using Native Web API's. We'll console.log the date, and call its toLocaleDateStringMethod(). The output is shown in the Console to the right.

[0:14] Since we aren't providing a locale, it defaults to the browser's locale. In my case, that's in en-US. However, we can provide our own locale as its first parameter to the method. Here, I'm manually passing in the English United States locale.

[0:31] We could try it again and this time use a French locale. Our date on the right will show up as dates do in France, but there's more. Let's create an object of dateOptions with various settings that we could tweak.

[0:45] We'll set weekday to "long," year to "numeric," month to "long," and day to "numeric." Now, we can take one of our previous logs, and this time provide a second parameter with date options.

[1:01] Now on the right, you could see the date formatted based on the settings we provided. Instead of always providing all the options, you could also just supply a subset of the options. For example, only provide month of "short" and day of "numeric," which will output Aug 4.

[1:19] This also works for other locales, like French, where we could ask for a "long" month, and it shows up in the console.

[1:30] Not only can we format dates, but we could also format times with the toLocaleTimeString method. As before, we don't have to provide the locale. It'll just use the browser's default locale as seen in the console. We could also provide our own locale like en-US, for example, or we could provide another locale like German.

[1:53] Much like we could provide options for dates, we could also provide options for time. Let's create a timeOptions object with hour12 of true, hour of "numeric," minute of "2-digit," second of "2-digit," and timeZone of "America/Los Angeles."

[2:17] Now, we could log the date calling the toLocaleTimeString method, passing a locale and our timeOptions. Instead of passing all the options, we could provide a subset of them as well.

[2:30] If we didn't want the seconds, we could just ask for hour of "numeric" and minute of "2-digit," or if we wanted military time, we could ask for hour12 of false.

[2:43] There's also another method called toLocaleString(), that accepts options from either date or time. We could combine all the options from both of our objects with the spread operator and get both our date and time formatted together.

[3:00] Finally, for performance reasons, if we find ourselves formatting dates or times over and over again, we might consider another approach and create an instance of the Intl.DateTimeFormat using our locale and options, and then call the format method of our instance, passing whatever date we want to format using those settings.