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
