Convert 12 Hour Format Time to 24 Hour Format in JavaScript

Converting 12 hour format time to 24 hour format in JavaScript can be easily achieved using various approaches which we will be discussing in this article. For conversion from 12 hour to 24 hour format we check for the modifier(AM or PM). Depending on the modifier we convert the time formats.

In this article, we have specified a time at the beginning in 12 hour format. Our task is to convert 12 hour format time to 24 hour format in JavaScript.

Approaches to Convert 12-hours format to 24-hours

Here is a list of approaches to convert 12 hour format to 24 hour format in JavaScript which we will be discussing in this article with stepwise explanation and complete example codes.

• Using String Manipulation
• Using Date Object
• Using Regular Expressions

Using String Manipulation

To convert 12 hour format to 24 hour format in JavaScript we have used string manipulation method where, we have used split() method to separate the time and modifier and then hour and minutes along with if/else statement to adjust hour value.

• We have declared a timeStr variable to store the time for conversion and defined a function convert() which accepts timeStr as argument.
• Then with the help of split() method, we have separated the time, and modifier, and hour and minute.
• The if/else statement handles the conversion of "12" to "00". The parseInt() method converts the time string into a number with base 10 and then adds 12 to handle the time after 12:00 PM.
• Then hours and minutes is returned and the result is displayed in web console using console.log() method.

Example

Here is a complete example code implementing above mentioned steps to convert 12 hour format to 24 hour format in JavaScript using string manipulation.

const timeStr = '05:00 PM';
console.log("Time in 12-hour format: ", timeStr);

function convert(timeStr){
   const [time, modifier] = timeStr.split(' ');
   let [hours, minutes] = time.split(':');
   if (hours === '12') {
      hours = '00';
   }
   if (modifier === 'PM') {
      hours = parseInt(hours, 10) + 12;
   }
   return `${hours}:${minutes}`;
};

console.log("Time in 24-hour format: ", convert(timeStr));

Using Date Object

In this approach we have used Date object to convert 12 hour format to 24 hour format in JavaScript.

• We have declared a time variable to store the time for conversion and defined a function convert() which accepts time as an argument.
• The Date object is used to create a date time instance by appending the time to a date string.
• The getHours() method gets the hours in 24 hour format, toString() converts the time into string and padStart() makes sure that the hour value is always two-digit by appending 0 in single digit value.
• Similarly the getMinutes() method gets the minutes value as previous step.
• At the end, the hours and minutes are returned, and the result is displayed in the web console using the console.log() method.

Example

Here is a complete example code implementing above mentioned steps to convert 12 hour format to 24 hour format in JavaScript using Date object.

const time = '05:00 PM';
console.log("Time in 12-hour format: ", time);

function convert(time) {
   const date = new Date(`2025-01-20 ${time}`);
   const hours = date.getHours().toString().padStart(2, '0');
   const minutes = date.getMinutes().toString().padStart(2, '0');
   return `${hours}:${minutes}`;
}

console.log("Time in 24-hour format: ", convert(time));

Using Regular Expressions

In this approach to convert 12 hour format to 24 hour format in JavaScript we have used regular expression to validate the specified time by user and then using conditional statement to get the desired result.

• We have declared a time variable to store the time for conversion and defined a function convert() that accepts time as an argument.
• We have defined a regular expression in regex to get components from the input time string, including hours, minutes, and the meridian (AM or PM). The ^ indicates beginning and $ indicates the end of expression.
• The (\d{1,2}) denotes the hour part where /d matches digits(0-9) and {1,2} indicates hour should be of 1 or 2 digit.
• The (\d{2}) denotes the minute part and should be of two-digit and AM|PM matches the modifier.
• Then we have used match() method to validate the specified time with the regex. If the specified time doesn't match with the regex then "Invalid time format" is returned.
• Then with the if/else, we check if the time is in PM and not 12, then 12 is added to the hours and if the time is in AM and the hours are 12, the hours are set to 0.
• At the end, the padStart() method displays the hours as two digits, and the formatted time is returned. The result is displayed in the web console using the console.log() method.

Example

Here is a complete example code implementing above mentioned steps to convert 12 hour format to 24 hour format in JavaScript using regular expression.

const time = '07:00PM';
console.log("Time in 12-hour format: ", time);

function convert(time) {
   const regex = /^(\d{1,2}):(\d{2})(AM|PM)$/i;
   const match = time.match(regex);

   if (!match) return "Invalid time format";
   let [, hours, minutes, meridian] = match;
   hours = parseInt(hours, 10);
   if (meridian.toUpperCase() === 'PM' && hours !== 12) {
      hours += 12;
   } else if (meridian.toUpperCase() === 'AM' && hours === 12) {
      hours = 0;
   }

   return `${hours.toString().padStart(2, '0')}:${minutes}`;
}

console.log("Time in 24-hour format: ", convert(time));

Conclusion

In this article for converting 12 hour format time to 24 hour format in JavaScript we have understood three different approaches. These approaches are: by using string manipulation, using Date object and using regular expression. All these approaches can be used depending on user's preferences.

Practice and learn from a wide range of JavaScript examples, including event handling, form validation, and advanced techniques. Interactive code snippets for hands-on learning.