Use Moment Js To Change Date Format In React App

Hello react devs in this react moment js example tutorial i am going to show you that how you can use moment js in your react js app to change date format. In this example i will share source code so that you can create and use moment js in your react app.

To use moment js we have to install moment npm package in our react app. Then we can use this package in our react app to change date format as like you want. Moment js provides many option to change javascript date format. Let's see how we can do that.

First we have to install moment js. So install it like below:

npm install moment --save   # npm
yarn add moment             # Yarn

Now you can use moment js in your react component like below:

import moment from "moment";

//uses
moment(status_list?.improvement_plan_end_date).format("LL")

//moment('your_date_to_be_formatted').format('format_moment_input')
                                       
 

Output looks like:

June 25, 2021

You can change date format in many types like

moment.locale();         // en
moment().format('LT');   // 8:59 PM
moment().format('LTS');  // 8:59:22 PM
moment().format('L');    // 06/28/2021
moment().format('l');    // 6/28/2021
moment().format('LL');   // June 28, 2021
moment().format('ll');   // Jun 28, 2021
moment().format('LLL');  // June 28, 2021 8:59 PM
moment().format('lll');  // Jun 28, 2021 8:59 PM
moment().format('LLLL'); // Monday, June 28, 2021 8:59 PM
moment().format('llll');

See details from moment js official site. Hope it can help you.