Ruzny MA

Posted on Jul 4

Simplifying Date Formatting in JavaScript

Introduction

Today, I’m bringing you some straightforward yet incredibly handy content for certain moments.

We all know that working with dates in JavaScript isn’t always the most enjoyable task, especially when it comes to formatting. However, I promise this time it will be simple and extremely useful.

Currently, there are a few libraries on the market that simplify date formatting in JavaScript, with the main ones being (date-fns and moment). However, installing these libraries in your project can add a lot of features you won’t use, making your application package unnecessarily heavy.

A great way to avoid this is by using JavaScript’s native functions. I’m excited to inform you that JavaScript has an excellent native function for date formatting called toLocaleDateString.

toLocaleDateString is a Date prototype method focused on the presentation of dates.

Let’s take a look at some examples; it will be much easier to understand.

toLocaleDateString Formatting Types

This method takes two arguments: locale and options.

Locale: This will follow the formatting standard of the specified locale, such as pt-BR or en-US. Note: If not specified, the browser’s locale will be used.
Options: These are the settings to format the date according to your preferences. Let’s dive into some examples.

Date Only

const date = new Date().toLocaleDateString('en-US');
console.log(date); // 7/4/2024

Formatted Date

const date = new Date().toLocaleDateString('en-US', {
  year: 'numeric',
  month: 'long',
  day: 'numeric'
});
console.log(date); // July 4, 2024

Formatted Date and Time

const date = new Date().toLocaleDateString('en-US', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric'
});
console.log(date); // July 4, 2024 at 7:47 AM

Date, Time Including Seconds

const date = new Date().toLocaleDateString('en-US', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric'
});
console.log(date); // July 4, 2024 at 7:47:51 AM

Date, Time Including Day of the Week

const date = new Date().toLocaleDateString('en-US', {
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric'
});
console.log(date); // Thursday, July 4, 2024 at 7:48:18 AM

Additional Options and Formats

You can also customize the format further with additional options:

Short Date Format

const date = new Date().toLocaleDateString('en-US', {
  year: '2-digit',
  month: '2-digit',
  day: '2-digit'
});
console.log(date); // 07/04/24

Custom Locale

const date = new Date().toLocaleDateString('fr-FR', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  weekday: 'long'
});
console.log(date); // jeudi 4 juillet 2024

Numeric Time Only

const time = new Date().toLocaleTimeString('en-US', {
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit'
});
console.log(time); // 07:48:18

Combining Date and Time

const dateTime = new Date().toLocaleString('en-US', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit',
  hour12: true
});
console.log(dateTime); // July 4, 2024, 07:48:18 AM

Conclusion

As you can see, using toLocaleDateString for formatting is quite practical. By utilizing JavaScript's native date formatting methods, you can create flexible and lightweight date presentations without relying on external libraries. This not only keeps your application package smaller but also improves performance.

I hope this post helps you handle date formatting more efficiently in your JavaScript projects. If you find this post helpful, follow, like, and share among your network! Keep connected for more JavaScript tips and tricks.

Happy Coding 🧑‍💻🚀

Follow Me On:

DEV Community