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 rea…


This content originally appeared on DEV Community and was authored by Adeyemi Adeshina

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
  • 2 use import { format } from 'date-fns' within your component
import { format } from 'date-fns'
  • 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')}

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


This content originally appeared on DEV Community and was authored by Adeyemi Adeshina


Print Share Comment Cite Upload Translate Updates
APA

Adeyemi Adeshina | Sciencx (2021-09-22T01:19:10+00:00) Formatting Dates in React Js with fns. Retrieved from https://www.scien.cx/2021/09/22/formatting-dates-in-react-js-with-fns/

MLA
" » Formatting Dates in React Js with fns." Adeyemi Adeshina | Sciencx - Wednesday September 22, 2021, https://www.scien.cx/2021/09/22/formatting-dates-in-react-js-with-fns/
HARVARD
Adeyemi Adeshina | Sciencx Wednesday September 22, 2021 » Formatting Dates in React Js with fns., viewed ,<https://www.scien.cx/2021/09/22/formatting-dates-in-react-js-with-fns/>
VANCOUVER
Adeyemi Adeshina | Sciencx - » Formatting Dates in React Js with fns. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/09/22/formatting-dates-in-react-js-with-fns/
CHICAGO
" » Formatting Dates in React Js with fns." Adeyemi Adeshina | Sciencx - Accessed . https://www.scien.cx/2021/09/22/formatting-dates-in-react-js-with-fns/
IEEE
" » Formatting Dates in React Js with fns." Adeyemi Adeshina | Sciencx [Online]. Available: https://www.scien.cx/2021/09/22/formatting-dates-in-react-js-with-fns/. [Accessed: ]
rf:citation
» Formatting Dates in React Js with fns | Adeyemi Adeshina | Sciencx | https://www.scien.cx/2021/09/22/formatting-dates-in-react-js-with-fns/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.