Today, I’m bringing you some straightforward yet incredibly handy content for certain moments. 👊
We all know that working with <code>dates</code> in JavaScript isn’t always the most enjoyable task 😁, especially when it comes to <code>formatting</code>. However, I promise this time it will be simple and extremely useful.
<h2>📑 About</h2>
Currently, there are a few libraries on the market that simplify date <code>formatting</code> 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 <code>toLocaleDateString</code>.
toLocaleDateString is a <code>Date</code> prototype method focused on the presentation of dates.
Let’s take a look at some examples; it will be much easier to understand. 😉
<h2>📚 <code>toLocaleDateString</code> Formatting Types</h2>
This method takes two arguments: locale and options.
<ul>
<li>Locale: This will follow the formatting standard of the specified locale, such as <code>pt-BR</code> or <code>en-US</code>. Note: If not specified, the browser’s locale will be used.</li>
<li>Options: These are the settings to format the date according to your preferences.
Let’s dive into some examples. 💪</li>
</ul>
⭐ Date Only
<pre><code class="language-js">const date = new Date().toLocaleDateString(&#x27;en-US&#x27;);
console.log(date); // 5/28/2024
</code></pre>
⭐ Formatted Date
<pre><code class="language-js">const date = new Date().toLocaleDateString(&#x27;en-US&#x27;, {
 year: &#x27;numeric&#x27;,
 month: &#x27;long&#x27;,
 day: &#x27;numeric&#x27;
});
console.log(date); // May 28, 2024
</code></pre>
⭐ Formatted Date and Time
<pre><code class="language-js">const date = new Date().toLocaleDateString(&#x27;en-US&#x27;, {
 year: &#x27;numeric&#x27;,
 month: &#x27;long&#x27;,
 day: &#x27;numeric&#x27;,
 hour: &#x27;numeric&#x27;,
 minute: &#x27;numeric&#x27;
});
console.log(date); // May 28, 2024 at 7:47 AM
</code></pre>
⭐ Date, Time Including Seconds
<pre><code class="language-js">const date = new Date().toLocaleDateString(&#x27;en-US&#x27;, {
 year: &#x27;numeric&#x27;,
 month: &#x27;long&#x27;,
 day: &#x27;numeric&#x27;,
 hour: &#x27;numeric&#x27;,
 minute: &#x27;numeric&#x27;,
 second: &#x27;numeric&#x27;
});
console.log(date); // May 28, 2024 at 7:47:51 AM
</code></pre>
⭐ Date, Time Including Day of the Week
<pre><code class="language-js">const date = new Date().toLocaleDateString(&#x27;en-US&#x27;, {
 weekday: &#x27;long&#x27;,
 year: &#x27;numeric&#x27;,
 month: &#x27;long&#x27;,
 day: &#x27;numeric&#x27;,
 hour: &#x27;numeric&#x27;,
 minute: &#x27;numeric&#x27;,
 second: &#x27;numeric&#x27;
});
console.log(date); // Tuesday, May 28, 2024 at 7:48:18 AM
</code></pre>
As you can see, using this method for formatting is quite practical. 🙃
Here are all the possible options you can use for formatting:
✅ Available Options:
<ul>
<li>weekday: long (Tuesday) | short (Tue) | narrow (T)</li>
<li>era: long (5/28/2024 Anno Domini) | short (5/28/2024 AD) | narrow (5/28/2024 A)</li>
<li>year: numeric (2024) | 2-digit (24)</li>
<li>month: numeric (5) | 2-digit (05) | long (julhoMay | short (May) | narrow (M)</li>
<li>day: numeric (28) | 2-digit (28)</li>
<li>hour: numeric (7) | 2-digit (07)</li>
<li>minute: numeric (53) | 2-digit (53)</li>
<li>second: numeric (7) | 2-digit (7)</li>
<li>timeZoneName: long (5/28/2024, Brasilia Standard Time) | short (5/28/2024, GMT-3)</li>
</ul>
<h2>🔗 References</h2>
You can learn more about this topic at the following links:
<a href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString" target="_blank" rel="noopener nofollow">https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString</a>
<a href="https://blog.yogeshchavan.dev/how-to-display-formatted-date-in-javascript-without-using-any-external-library" target="_blank" rel="noopener nofollow">https://blog.yogeshchavan.dev/how-to-display-formatted-date-in-javascript-without-using-any-external-library</a>

News, updates, and discussions about everything happening in and around the Node.js runtime.

Node.js developers

Learn how to format dates in JavaScript using the native toLocaleDateString function. Avoid unnecessary library installations and make your application lighter.

Formatting dates in Javascript

Excellent post! 👏 Handling dates in JavaScript can indeed be challenging, but the toLocaleDateString method is a great native solution. 🎉 It’s amazing to see how we can format dates in various ways without needing to add external libraries, keeping our projects lighter. Thank you for sharing these clear and practical examples! 🚀

I enjoyed your post! You clearly explained how to use the toLocaleDateString function, and the examples make it super easy to understand. Excellent and practical content! 👏

Nice, formatting dates in Javascript is always painful, with this article, maybe, things will be easier.

Fantastic article! It is truly inspiring to see how something that seemed complicated can be resolved so elegantly with JavaScript’s nat.