How to Format Date with Moment.js?

Last Updated : 29 Jul, 2024

Formatting dates is essential for presenting date and time information in a way that's readable and useful for users. Moment.js provides several methods for formatting dates from simple and predefined formats to more complex and localized representations.

Below are different approaches:

Table of Content

Basic Formatting
Custom Formatting with Tokens
Localized Formatting

Basic Formatting

In this approach we use predefined format strings to display dates in standard formats. This method is straightforward and covers common use cases.

Syntax:

moment().format('formatString');

Example: This demonstrates how to use the moment library in Node.js to format the current date into three different formats: YYYY-MM-DD, MM/DD/YYYY, and DD-MM-YYYY.

JavaScript

const moment = require('moment');
console.log(moment().format('YYYY-MM-DD'));
console.log(moment().format('MM/DD/YYYY'));
console.log(moment().format('DD-MM-YYYY'));

Output:

2024-07-26
07/26/2024
26-07-2024

Custom Formatting with Tokens

In this approach we use custom formatting. it allows for detailed control over the date representation using tokens. Tokens represent various date components like year, month, and day.

Syntax:

moment().format('customFormatString');

Example: This demonstrates the use of 'moment' library to format and display the current date and time in two formats: MMMM Do YYYY, h:mm:ss a and dddd, MMMM Do YYYY

JavaScript

const moment = require('moment');
console.log(moment().format('MMMM Do YYYY, h:mm:ss a'));
console.log(moment().format('dddd, MMMM Do YYYY'));

Output:

July 26th 2024, 2:00:34 pm
Friday, July 26th 2024

Localized Formatting

Localized formatting adapts date representations to various languages and regional settings. Here we need to set the locale before formatting.

Syntax:

moment().locale('locale').format('formatString');

Example: The code sets the locale for the `moment` library to French and German and displays the current date in a localized long format (`LL`) for each language.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
     initial-scale=1.0">
    <title>Localized Formatting Example</title>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/locale/fr.min.js"></script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/locale/de.min.js"></script>
</head>

<body>
    <p><strong>French Date:</strong>
        <span id="french-date"></span>
    </p>
    <p><strong>German Date:</strong>
        <span id="german-date"></span>
    </p>

    <script>
        const frenchDate =
            moment().locale('fr').format('LL');
        const germanDate =
            moment().locale('de').format('LL');
        document.getElementById('french-date')
            .innerText = frenchDate;
        document.getElementById('german-date')
            .innerText = germanDate;
    </script>
</body>

</html>

Output:

How to Use format() on a Moment.js Duration?

ghuleyogesh

Improve

Article Tags :

How to Format Date with Moment.js?

Basic Formatting

Syntax:

Custom Formatting with Tokens

Syntax:

Localized Formatting

Syntax:

Similar Reads

Thank You!

What kind of Experience do you want to share?