- Published on
Complete guide of Reactjs date format dd/mm/yyyy
- Authors
- Name
- Alejo G.B
- https://twitter.com/reactshark
Resources I've read to create this article:
- The Definitive Guide to DateTime Manipulation (Toptal)
- Everything You Need to Know About Date in JavaScript (CSS tricks)
- https://www.carlrippon.com/formatting-dates-and-numbers-in-react/
Table of contents
- Formatting dd/mm/yyyy with
date-fns
(SOLUTION) - Formatting yyyy/mm/dd with
date-fns
- Shorter solution with no dependency
- International formats
- About moment.js
- Exercise
Intro
So one of the issues is that you have when using new Date()
(JS function)
Is that it returns a long unformatted date
Something like: Mon Aug 09 2021 20:38:05 GMT-0300 (standard time of Argentina)
You want something much simpler like Mon, 9 August 2021
Here is a quick showcase of the solution:
import { format } from 'date-fns'// dd/mm/yyyy formatformat(new Date(), 'dd/mm/yyyy')// OR...// dd/mm/yyyy formatformat(new Date(), 'yyyy/mm/dd')
Yes, it's that simple.
But it's recommended to continue reading so you get to know how to apply date-fns
to your projects.
date-fns
Formatting dd/mm/yyyy with You can check the CodeSandbox of this section.
For this first step we are going to have a list of blog posts:
// data.jsconst data = [ { title: 'How to cook', createdAt: new Date(), }, { title: 'The complete guide to digital marketing', createdAt: new Date(), },]export default data
After we have the data.js
file, we are going to map through every blog post:
// App.jsimport data from './data'import { format } from 'date-fns'export default function App() { return ( <div> <h1>Blog posts</h1> <ul> {data.map((post) => ( <li> <h3>{post.title}</h3> <p>{format(post.createdAt, 'dd/mm/yyyy')}</p> </li> ))} </ul> </div> )}
As you will see at the end of this article, momentjs which is a well-known library has been deprecated, which means we have now to use another library
The fact that we are not using Momentjs in this case, doesn't mean that we are now going with the worse option.
Actually, date-fns is much more optimized than momentjs and makes your app much more lightweight.
Basically, date-fns is modular, allowing you to only use the functions you'll use. Also, its size is 44 kb!
In conclusion, date-fns performs much better than momentjs.
Formatting yyyy-mm-dd *with date-fns*
Another thing people search for these days is “react date format yyyy-mm-dd”, they want to know how to format a React date with the year at the most left, then the month, and at the end of the days.
// App.jsimport data from './data'import { format } from 'date-fns'export default function App() { return ( <div> <h1>Blog posts</h1> <ul> {data.map((post) => ( <li> <h3>{post.title}</h3> <p>{format(post.createdAt, 'yyyy/mm/dd')}</p> </li> ))} </ul> </div> )}
Formatting dates with no dependency
Here you have an option of just using native JavaScript functions to format your date in React.
function formatDate(newDate) { const months = { 0: 'January', 1: 'February', 2: 'March', 3: 'April', 4: 'May', 5: 'June', 6: 'July', 7: 'August', 8: 'September', 9: 'October', 10: 'November', 11: 'December', } const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] const d = newDate const year = d.getFullYear() const date = d.getDate() const monthIndex = d.getMonth() const monthName = months[d.getMonth()] const dayName = days[d.getDay()] // Thu const formatted = `${dayName}, ${date} ${monthName} ${year}` return formatted.toString()}return ( <div className="App"> <h1>Blog posts</h1> <ul> {data.map((post) => ( <li> <h3>{post.title}</h3> <p>{formatDate(post.createdAt)}</p> </li> ))} </ul> </div>)
You can check the CodeSandbox of this section.
Shorter solution with no dependency
(Stack Overflow version)
let today = new Date()let date = today.getDate() + '-' + parseInt(today.getMonth() + 1) + '-' + today.getFullYear()console.log(date)
Go to the console and see how it formats new Date()
.
Want to use international formats?
While this is less flexible, such as you are not formatting the date, you are just initializing your date based on the country standard.
Say you want to use US (m/d/yyyy)
format
const nowDate = new Date()const UsFormatter = new Intl.DateTimeFormat('en-US')console.log(UsFormatter.format(nowDate))// 8/9/2021
💡 Wait but you can actually add some customization
const longEnUSFormatter = new Intl.DateTimeFormat('en-US', { year: 'numeric', month: 'long', day: 'numeric',})console.log(longEnUSFormatter.format(firstValentineOfTheDecade))// February 14, 2020
Exercise
Let's say you are creating an app with reusable components.
If you would have to create a Blog app, where you have data about each blog post.
const blogPosts = [ { title: 'How to cook', createdAt: new Date(), }, { title: 'The complete guide to digital marketing', createdAt: new Date(), },]
⚠️ There is a problem with new Date()
It returns a long unformatted Date, and we want short dates with dd/mm/yyyy
format
How would you approach formatting dates?
Exercise: Create a React app and map the data above and format it
⚠️Momentjs is no longer mantained
While making this article I found that momentjs, a library like date-fns or any other to easily do cool stuff with dates, is no longer maintained and there will not be more features.
"We now generally consider Moment to be a legacy project in maintenance mode. It is not dead, but it is indeed done."