Moment.js 24h format

Jumping between time formats

One size rarely fits all, and this saying holds for time formats. You have LT, a token in Moment.js that represents time in the locale's preferred format, typically in 12-hour format with AM/PM.

let twelveHourTime = moment().format('LT'); // If it's "2:23 PM"... it's tea time!


To convert this time to a 24-hour format, split and manipulate the layout string as follows:

let twentyFourHourTime = twelveHourTime.replace(/(\d+)(:\d+)(\s+)(AM|PM)/, 
  (match, hour, minute, space, meridiem) => `${hour.padStart(2,'0')}${minute}`); // Magic... Just more maths!


Manoeuvring thorough time units

Sometimes, you need more granularity than just hours and minutes. That’s when you turn to ss for seconds and even SSS for milliseconds.

const fullTime = moment().format('HH:mm:ss.SSS');
console.log(fullTime); // So precise, it hurts: "14:23:15.123"


Moment.js even offers ways for you to wrestle with time components for advanced manipulation, with methods such as hour, minute, and second.

const hour = moment().hour(); // Just the hour, nothing else.
moment().hour(15).minute(30); // Time travel to 3:30 PM 


Covering every time zone

The world is divided into different time formats and catering to this diversity is a must. Tailor time formats to meet international standards with Moment.js.

Display local time by modifying the meridiem function to adjust the AM/PM annotations, or just get rid of them for a 24-hour display:

moment.updateLocale('en', {
  meridiem : function (hour, minute, isLowerCase) {
    return ''; // Goodbye, AM/PM!
  }
});


Advanced time manipulation

Moment.js contains a treasure trove of time manipulation and validation techniques to tackle diverse scenarios:

1. Converting from 12-hour to 24-hour format and vice versa.
2. Validating user input for correct time formats.
3. Managing countdowns to future events or scheduling routines.

const isValidTime = (time) => moment(time, 'HH:mm').isValid(); // Time police checking
const addHours = (time, hoursToAdd) => moment(time, 'HH:mm').add(hoursToAdd, 'hours').format('HH:mm'); // Time traveler's utility belt

const eventTime = moment('2023-05-01T15:00:00'); // Scheduled event time... future awaits!
const countdown = moment.duration(eventTime.diff(moment())).humanize(); // "in 10 days"... or less!


With these functions in your developer toolbox, you're ready to control time like never before!