how to format time in moment js?

Hi Friends 👋,

Welcome To Infinitbility! ❤️

To format time in moment js, just use the moment().format() method by passing desire format string parameters.

Just import moment in your file and invoke moment().format('hh:mm:ss'); it will show the current time.

Copy 
1moment().format('hh:mm:ss')

Today, I’m going to show How do I format time in moment js, here I will use the momentjs common method format() to format the date object.

Let’s start the today’s tutorial How do you format time in moment js?

Table of content

1. Installation
2. Moment Format rules
3. Example in reactjs

Installation

Use the below installation command as per your package manager, moment support npm, Yarn, NuGet, spm, and meteor.

Copy 
1npm install moment --save   # npm
2yarn add moment             # Yarn
3Install-Package Moment.js   # NuGet
4spm install moment --save   # spm
5meteor add momentjs:moment  # meteor

Moment Format rules

Moment follow below rules to format date time as per user requirement like show am, pm in time string, show two digits year, and show date with st, nd, and rd.

After reading the above rules, you can easily understand how to format time as per your requirement. let’s see how we can use the format() method with the above rules.

Example in reactjs

In the following example, we are going to do

1. import the moment package
2. example of 24-hour format time HH:mm:ss
3. example of 12-hour format time h:mm:ss a

let’s write the code.

Copy 
1import moment from "moment";
2
3function App() {
4  return (
5    <div>
6        {/* example of 24 hour format time `HH:mm:ss` */}
7        {console.log(moment().format("HH:mm:ss"))}
8        {console.log("----")}
9        {/* example of 12 hour format time `h:mm:ss a` */}
10        {console.log(moment().format("h:mm:ss a"))}
11    </div>
12  );
13}
14
15export default App;

In the above program, we call moment().format() with format string rules.

let’s check the output.

I hope it’s help you, All the best 👍.