JavaScript program to convert 24 hours format to 12 hours

To convert 24 hours format to 12 hours in Javascript, we have discussed two different approaches.

In this article we are having time in 24 hours format, our task is to write a JavaScript program to convert 24 hours format to 12 hours.

Approaches to Convert 24-hours format to 12-hours

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

• Using if-else Statement
• Using Date Object

Using if-else Statement

To convert 24 hours format to 12 hours in Javascript, we have used basic if/else condition where we check if the hour is greater than 12.

• We have declared two variable to store the time in 24 hour format and defined a function time() which accepts time in 24 hours format.
• Then we have used split() method to separate hours and minutes. The map() method is used to convert the separated hours and minute string into a number.
• Based on hour, we have used if-else statement to decide 'AM' or 'PM'. A 0 is added in minutes for single digit value.
• At the end, hours and minutes is returned and the time in 12 hour format is displayed in web console using console.log().

Example

Here is a complete example code implementing above mentioned steps to convert 24 hours format to 12 hours using if/else statement.

let time1 = "14:30";
let time2 = "00:15";

function time(time24) {
    let [hours, minutes] = time24.split(":").map(Number); 
    let period;
    if (hours >= 12) {
        period = "PM";
    } else {
        period = "AM";
    }
    hours = hours % 12 || 12; 
     if (minutes < 10) {
        minutes = "0" + minutes; 
    }
    return hours + ":" + minutes + " " + period;
}
console.log("Time in 24-hour format: ", time1);
console.log("Time in 12-hour format: ", time(time1));
console.log("Time in 24-hour format: ", time2);
console.log("Time in 12-hour format: ", time(time2));

The output of the above code is as follows:

Time in 24-hour format:  14:30
Time in 12-hour format:  2:30 PM
Time in 24-hour format:  00:15
Time in 12-hour format:  12:15 AM

Using Date Object

In this method to convert 24 hours format to 12 hours in Javascript, we have used methods of Date object to get the real time while executing the code.

• We have used following methods of Date object: new Date() constructor to get the current date, getHours() to get the current hour, and getMinutes() to get the current minute.
• Then we have defined a function time() where if-else statement is used to decide the period of time i.e 'AM' or 'PM'.
• At the end, time in 12 hours format is returned and displayed in web console using console.log() method.

Example

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

let date = new Date();
let hours = date.getHours();
let minutes = date.getMinutes();
let period;
function time() {
    if ((hours % 12) || 12) {
        if (hours >= 12) {
            period = "PM";
        } else {
            period = "AM";
        }
    }
    return "Time in 12-hr Format: " + hours + ":" + minutes + " " + period;
}
console.log(time());

The output of the above code is as follows:

Time in 12-hr Format: 15:58 PM

In this article to to write a JavaScript program to convert 24 hours format to 12 hours, we have discussed two different approaches. These approaches are by using if/else statement and by using Date object.

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.