MomentJS - Customization

Modern Date/Time: Customizing Moment.js Locales

Moment.js allows extensive customization of its locale settings, enabling you to tailor date and time displays precisely to specific regional or application requirements. This is particularly useful for overriding default translations or formats.

Remember the general advice regarding Moment.js: it’s powerful but in maintenance mode. Consider alternatives for new projects.

Locale Customization Options

You can customize various aspects of a locale using moment.updateLocale(localeName, config). If the locale doesn’t exist, it will be created. The config object can include the following properties:

Customization Area	Description & Config Key
Month Names	months: An array of 12 full month names (e.g., [‘January’, …]).
Month Abbreviations	monthsShort: An array of 12 abbreviated month names (e.g., [‘Jan’, …]).
Weekday Names	weekdays: An array of 7 full weekday names (starting Sunday, e.g., [‘Sunday’, …]).
Weekday Abbreviations	weekdaysShort: An array of 7 abbreviated weekday names (e.g., [‘Sun’, …]).
Minimal Weekday Abbreviation	weekdaysMin: An array of 7 minimal weekday abbreviations (e.g., [‘Su’, …]).
Long Date Formats	longDateFormat: An object mapping format tokens (LT, LTS, L, LL, LLL, LLLL) to custom format strings (e.g., { L: ‘DD/MM/YYYY’ }).
Relative Time (e.g., ‘in 5 minutes’)	relativeTime: An object defining templates for past/future durations (s, m, mm, h, hh, d, dd, M, MM, y, yy).
AM/PM Designators	meridiem: A function that returns the appropriate AM/PM string based on hour, minute, and isLower.
AM/PM Parsing	meridiemParse: A regular expression to match AM/PM indicators during parsing.
Calendar Time (e.g., ‘Today at 2:00 PM’)	calendar: An object defining formats for different time relations (sameDay, nextDay, lastDay, nextWeek, lastWeek, sameElse).
Ordinal Numbers (e.g., ‘1st’, ‘2nd’)	ordinal: A function that returns the ordinal suffix for a given number (e.g., %d日 for Japanese).
Relative Time Thresholds	relativeTimeThresholds: An object to configure thresholds for duration.humanize() (e.g., { s: 45, ss: 44, m: 45, … }). Use ss for durations under a second.

Example: Customizing French Locale

Let’s modify the French locale (‘fr’) to use a different short date format and customize the ‘a few seconds ago’ message.

// Ensure French locale is loaded if not using moment-with-locales.js
// import 'moment/locale/fr'; // Or require('moment/locale/fr');

moment.updateLocale('fr', {
  longDateFormat : {
    L : 'DD-MM-YYYY', // Change short date format
    LL : 'D MMMM YYYY',
    LLL : 'D MMMM YYYY HH:mm',
    LLLL : 'dddd D MMMM YYYY HH:mm',
    LT : 'HH:mm',
    LTS : 'HH:mm:ss'
  },
  relativeTime : {
    future : 'dans %s',
    past : 'il y a %s',
    s : 'quelques secondes', // Customize 'a few seconds'
    ss: '%d secondes', // Add customization for sub-second durations if needed
    m : 'une minute',
    mm : '%d minutes',
    h : 'une heure',
    hh : '%d heures',
    d : 'un jour',
    dd : '%d jours',
    M : 'un mois',
    MM : '%d mois',
    y : 'un an',
    yy : '%d ans'
  }
});

// Now use the customized locale
moment.locale('fr');
console.log(moment().format('L')); // Output: e.g., 26-10-2023
console.log(moment().subtract(5, 'seconds').fromNow()); // Output: il y a quelques secondes

This customization persists until the locale is updated again or the page is reloaded.

Important Considerations

• Load Base Locale First: Ensure the base locale you want to customize is loaded before calling updateLocale.
• Global Effect: updateLocale modifies the locale globally.
• Complexity: While powerful, deep customization can become complex. Ensure changes are well-tested.

Refer to the Moment.js documentation for the full structure of the locale configuration object: https://momentjs.com/docs/#/customization/