DEV Community

Cover image for Formatting Dates in React Js with fns
Adeyemi Adeshina
Adeyemi Adeshina

Posted on

Formatting Dates in React Js with fns

If you are new to reactjs, you will agree with me that date format is quite different from that of core javascript where what is needed to do is just writing a simple date object: new Date().

However in the modern day JavaScript library which is reactjs, getting and formatting date is quite different. Though there are ways to format dates, but I will show you the simplest way you can go about it.

  • 1 install npm date-fns in your project directory (root directory)
C:\MyProjects\react-project>npm install date-fns
Enter fullscreen mode Exit fullscreen mode
  • 2 use import { format } from 'date-fns' within your component
import { format } from 'date-fns'
Enter fullscreen mode Exit fullscreen mode
  • 3 use the new Date() object within your component

Now, after doing 2 and 3 as mentioned above, you can then make use of the Date() and format it as you wish. For example:

{format ( new Date(), 'do MMMM Y')}
Enter fullscreen mode Exit fullscreen mode

This will give us the current date. Example: 22 SEPTEMBER 2021

Discussion (0)