In this article, we are going to learn about the conversion of a string to a 24-hour time format in JavaScript, converting a string to a 24-hour time format involves transforming a time representation from the traditional 12-hour clock (AM/PM) to the 24-hour clock (00:00 to 23:59).
There are several methods that can be used to convert a string to a 24-hour time format in JavaScript, which are listed below:
Table of Content
We will explore all the above methods along with their basic implementation with the help of examples.
Approach 1: Using String Manipulation
This approach involves splitting the input string using the delimiter, extracting the hour and minute components, and converting them to a 24-hour format.
Syntax:
const [time, period] = timeString.split(' ');
const [hour, minute] = time.split(':');
let formattedHour = parseInt(hour);
Example: In this example, we are using the above approach.
Javascript
function convertTo24HourFormat(timeString) { const [time, period] = timeString.split(' '); const [hour, minute] = time.split(':'); let formattedHour = parseInt(hour); if (period === 'PM') { formattedHour += 12; } return `${formattedHour}:${minute}`; } const inputTime = '03:30 PM'; const formattedTime = convertTo24HourFormat(inputTime); console.log(formattedTime); |
15:30
Approach 2: Using Regular Expressions
Regular expressions can help extract the hour, minute, and AM/PM components from the input string. The AM/PM component is then used to adjust the hour value.
Syntax:
const match = timeString.match(/(\d+):(\d+) (\w+)/);
Example: In this example Regular expressions split time into hour, minute, and period. Adjust hour based on period to 24-hour format. Combine components into a formatted string.
Javascript
function convertTo24HourFormat(timeString) { const match = timeString.match(/(\d+):(\d+) (\w+)/); const hour = parseInt(match[1]); const minute = match[2]; const period = match[3]; let formattedHour = hour; if (period === 'PM' && hour < 12) { formattedHour += 12; } return `${formattedHour}:${minute}`; } const inputTime = '4:45 PM'; const formattedTime = convertTo24HourFormat(inputTime); console.log(formattedTime); |
16:45
Approach 3: Using the Date Object
In this approach, using the Date object, input time is set with a common date. The formatted time is extracted in 24-hour format using toLocaleTimeString.
Syntax:
let formattedTime = date.toLocaleTimeString('en-US', { hour12: false });
Example: In this approach we are using the above-explained approach.
Javascript
function convertTo24Hour(timeString) { let date = new Date(`01/01/2022 ${timeString}`); let formattedTime = date.toLocaleTimeString('en-US', { hour12: false }); return formattedTime; } let inputTime = '09:15 PM'; let formattedTime = convertTo24Hour(inputTime); console.log(formattedTime); |
21:15:00
