How to Change Language in MomentJS? - Coding

Moment.js provides next-level customization through its locale settings, allowing you to adapt date and time formats to different languages and regional preferences. By using methods like moment.locale(), and moment.updateLocale(), you can globally or locally set languages, and even customize existing locales to fit specific formatting needs.

These are the following approaches we are going to discuss:

Table of Content

Using moment.locale() to Set a Global Locale
Using moment().locale() to Set a Locale for a Specific Instance
Using moment.updateLocale() to Customize an Existing Locale

Using moment.locale() to Set a Global Locale

In this approach, we are using moment.locale(‘hi’) to set Hindi as the global locale for all Moment.js operations. This changes the formatting of dates and times to Hindi, as demonstrated by moment().format(‘LLLL’), which displays the current date and time in Hindi.

Example: The below example uses moment.locale() to Set a Global Locale.

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>Moment.js Locale 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/hi.min.js"></script>
</head>

<body>
    <p id="date-time"></p>
    <script>
        moment.locale('hi');
        const currentDateTime =
            moment().format('LLLL');
        document.getElementById('date-time').innerText =
            currentDateTime;
    </script>
</body>

</html>

Output:

Hindi

Using moment().locale() to Set a Locale for a Specific Instance

In this approach, we are using moment().locale(‘es’) to set Spanish as the locale for a specific Moment instance. This affects only that particular instance, allowing dateInSpanish.format(‘LLLL’) to display the current date and time in Spanish.

Example: The below example uses moment().locale() to Set a Locale for a Specific Instance.

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0">
    <title>Moment.js Locale 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/es.min.js"></script>
</head>

<body>
    <p id="date-time"></p>
    <script>
        const dateInSpanish =
            moment().locale('es');
        const currentDateTimeInSpanish =
            dateInSpanish.format('LLLL');
        document.getElementById('date-time').innerText =
            currentDateTimeInSpanish;
    </script>
</body>
</html>

Output:

spanish

Using moment.updateLocale() to Customize an Existing Locale

In this approach, we are using moment.updateLocale(‘de’, {…}) to customize the existing German locale by modifying its date format. This customization changes how dates are formatted for the German locale, and then moment().locale(‘de’) applies this locale to a specific Moment instance. The console.log(dateInGerman.format(‘LLLL’)) statement displays the current date and time in the updated German format.

Example: The below example uses moment.updateLocale() to Customize an Existing Locale.

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0">
    <title>Moment.js Locale Customization 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/de.min.js"></script>
</head>

<body>
    <p id="date-time"></p>
    <script>
        moment.updateLocale('de', {
            longDateFormat: {
                LLLL: 'dddd, D MMMM YYYY, h:mm A'
            }
        });
        const dateInGerman =
            moment().locale('de');
        const currentDateTimeInGerman =
            dateInGerman.format('LLLL');
        document.getElementById('date-time').innerText =
            currentDateTimeInGerman;
    </script>
</body>
</html>

Output:

german

Reffered: https://www.geeksforgeeks.org

JavaScript

Related
How to Deep Merge Two Objects in JavaScript ?
How to Use format() on a Moment.js Duration?
How to Remove Time From Date with Moment.js?
Best Javascript Machine Learning Libraries in 2024
JavaScript's Latest Feature: Temporal API

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	19