Simplifying Date Formatting in JavaScript
Published: 2024-07-04 17:42:16

## 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
```javascript
const date = new Date().toLocaleDateString('en-US');
console.log(date); // 7/4/2024 

```

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

### Formatted Date and Time
```javascript
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
```javascript
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
```javascript
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
```javascript
const date = new Date().toLocaleDateString('en-US', {
  year: '2-digit',
  month: '2-digit',
  day: '2-digit'
});
console.log(date); // 07/04/24
```


### Custom Locale
```javascript
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
```javascript
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
```javascript
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:
- [LinkedIn](https://www.linkedin.com/in/ruzny-ahamed-8a8903176/)
- [X(Twitter)](https://x.com/ruznyrulzz)
- [GitHub](https://github.com/rooneyrulz)