How to Install & Use Moment.js in React
In this guide, I’m going to show how to setup and use moment.js in React. Let’s get started:
Table of Contents
Installation
We can use only moment
package but I I’ll suggest you to use react-moment too. It comes with handy JSX
tags which reduce a lot of work.
npm install --save moment react-moment
Optional: You can also install moment-timezone
package. It is required to use the timezone related functions.
npm install --save moment-timezone
Examples
Now let’s see some examples.
Get current datetime:
import React from 'react';
import moment from 'moment'
import Moment from 'react-moment';
function App() {
const currentDateTime = moment()
return(
<Moment>{currentDateTime}</Moment>
)
}
export default App;
Format datetime:
import React from 'react';
import moment from 'moment'
import Moment from 'react-moment';
function App() {
const currentDateTime = moment()
return(
<Moment format='MMMM Do YYYY, h:mm:ss a'>{currentDateTime}</Moment>
)
}
export default App;
Add and Subtract:
import React from 'react';
import moment from 'moment'
import Moment from 'react-moment';
function App() {
const currentDateTime = moment()
return(
<div>
<Moment add={{ hours: 12 }}>{currentDateTime}</Moment> <br/>
<Moment add={{ days: 1, hours: 12 }}>{currentDateTime}</Moment> <br/>
<Moment subtract={{ hours: 12 }}>{currentDateTime}</Moment> <br/>
<Moment subtract={{ days: 1, hours: 12 }}>{currentDateTime}</Moment>
</div>
)
}
export default App;
Use of Timezone:
import React from 'react';
import moment from 'moment'
import Moment from 'react-moment';
import 'moment-timezone';
function App() {
const currentDateTime = moment()
return(
<div>
Dhaka: <Moment unix tz="Asia/Dhaka">
{currentDateTime}
</Moment><br/>
Los Angeles: <Moment unix tz="America/Los_Angeles">
{currentDateTime}
</Moment>
</div>
)
}
export default App;
Have a look at moment.js, react-moment & moment-timezone pages to learn more.
That’s it. Thanks for reading. ?Comment
Preview may take a few seconds to load.
Markdown Basics
Below you will find some common used markdown syntax. For a deeper dive in Markdown check out this Cheat Sheet
Bold & Italic
Italics *asterisks*
Bold **double asterisks**
Code
Inline Code
`backtick`Code Block```
Three back ticks and then enter your code blocks here.
```
Headers
# This is a Heading 1
## This is a Heading 2
### This is a Heading 3
Quotes
> type a greater than sign and start typing your quote.
Links
You can add links by adding text inside of [] and the link inside of (), like so:
Lists
To add a numbered list you can simply start with a number and a ., like so:
1. The first item in my list
For an unordered list, you can add a dash -, like so:
- The start of my list
Images
You can add images by selecting the image icon, which will upload and add an image to the editor, or you can manually add the image by adding an exclamation !, followed by the alt text inside of [], and the image URL inside of (), like so:
Dividers
To add a divider you can add three dashes or three asterisks:
--- or ***

Comments (0)