Javascript: convert 24-hour time-of-day string to 12-hour time with AM/PM and no timezone

Question

The server is sending a string in this format: 18:00:00. This is a time-of-day value independent of any date. How to convert it to 6:00PM in Javascript? I could prepend today's date as a string to the value sent by the server and then parse the combined values and then try the .toTimeString() method of the Date object, but the format that time method emits is 24-hour time with a seconds chunk. I could write a function, but is there something built in?

score 134 · Accepted Answer · edited Aug 26 '19 at 16:03

134

Nothing built in, my solution would be as follows :

function tConvert (time) {
  // Check correct time format and split into components
  time = time.toString ().match (/^([01]\d|2[0-3])(:)([0-5]\d)(:[0-5]\d)?$/) || [time];

  if (time.length > 1) { // If time format correct
    time = time.slice (1);  // Remove full string match value
    time[5] = +time[0] < 12 ? 'AM' : 'PM'; // Set AM/PM
    time[0] = +time[0] % 12 || 12; // Adjust hours
  }
  return time.join (''); // return adjusted time or original string
}

tConvert ('18:00:00');

This function uses a regular expression to validate the time string and to split it into its component parts. Note also that the seconds in the time may optionally be omitted. If a valid time was presented, it is adjusted by adding the AM/PM indication and adjusting the hours.

The return value is the adjusted time if a valid time was presented or the original string.

Working example

(function() {

  function tConvert(time) {
    // Check correct time format and split into components
    time = time.toString().match(/^([01]\d|2[0-3])(:)([0-5]\d)(:[0-5]\d)?$/) || [time];

    if (time.length > 1) { // If time format correct
      time = time.slice(1); // Remove full string match value
      time[5] = +time[0] < 12 ? 'AM' : 'PM'; // Set AM/PM
      time[0] = +time[0] % 12 || 12; // Adjust hours
    }
    return time.join(''); // return adjusted time or original string
  }

  var tel = document.getElementById('tests');

  tel.innerHTML = tel.innerHTML.split(/\r*\n|\n\r*|\r/).map(function(v) {
    return v ? v + ' => "' + tConvert(v.trim()) + '"' : v;
  }).join('\n');
})();

<h3>tConvert tests : </h3>
<pre id="tests">
  18:00:00
  18:00
  00:00
  11:59:01
  12:00:00
  13:01:57
  24:00
  sdfsdf
  12:61:54
</pre>

edited Aug 26 '19 at 16:03

nmak18

1,059
8
24

answered Dec 16 '12 at 05:54

HBP

15,685
6
28
34

thanks for the answer "nothing built in" and for the function using regex. – Tim Dec 16 '12 at 10:59
@HBP when there is no date only time is in string the only way you can covert 24 hour format to 12 hour format is only your code worked for me bundle of thanks – skhurams Mar 12 '13 at 13:44
1

I think, we need a space in time[5] = +time[0] < 12 ? 'AM' : 'PM'; // Set AM/PM to time[5] = +time[0] < 12 ? ' AM' : ' PM'; // Set AM/PM for further usage any calculations or something else – sanjeev shetty Dec 21 '16 at 05:53
But it works only for PM.For AM it is not appending AM to the time – Sachin HR May 29 '18 at 11:25
1

I would argue that time minutes and seconds fields are always double digits. If you REALLY need single digit seconds change the RegExp by adding a ? between the ']' and '\d' of the seconds. – HBP May 08 '19 at 11:14
@HBP how to remove those seconds part. Need to show just HH:MM AM and want to show double digits for hour instead of one something link `5:30 -> 05:30` – Saroj Shrestha May 26 '19 at 14:48
**Something got built in**. Since 2016 or so, [there's no need to do this yourself](https://stackoverflow.com/a/54142884/1585345). – bbsimonbb Dec 10 '21 at 12:48

bbsimonbb · Answer 2 · 2022-05-24T07:36:11.373

63

toLocaleTimeString() makes this very simple. There is no need to do this yourself anymore. You'll be happier and live longer if you don't try to attack dates with string methods. (They will fight back.)

const timeString = '18:00:00'
// Prepend any date. Use your birthday.
const timeString12hr = new Date('1970-01-01T' + timeString + 'Z')
  .toLocaleTimeString('en-US',
    {timeZone:'UTC',hour12:true,hour:'numeric',minute:'numeric'}
  );
document.getElementById('myTime').innerText = timeString12hr

<h1 id='myTime'></h1>

edited May 24 '22 at 07:36

answered Jan 11 '19 at 08:34

bbsimonbb

27,056
15
80
110

1

+1. I do wish to be happier and live longer! What, specifically, causes the seconds chunk to be suppressed upon output? Is it because the `seconds` property has been left undefined? – Tim Nov 16 '19 at 12:16
Yup. If you don't specify anything, everything comes out. Once you start specifying, you only get what you ask for. Happy long life ! – bbsimonbb Nov 17 '19 at 12:39
1

this is great way – Samiksha Jagtap Jul 27 '20 at 09:32
I am using this code but in my country it's not showing AM/PM. It will show CH replace. How to fix this? – huykon225 Jun 28 '21 at 03:01
1

The first argument to toLocaleTimeString is the culture. It used to be empty, but I've updated the answer now to 'en-US' because the question specifically asks for AM/PM. This obviously defeats localization but should fix your problem. What's your country ? What do you see if you run `navigator.language` ? – bbsimonbb Sep 27 '21 at 07:25

gilly3 · Answer 3 · 2022-09-06T20:32:12.913

55

To get AM/PM, Check if the hour portion is less than 12, then it is AM, else PM.

To get the hour, do (hour % 12) || 12.

This should do it:

function formatTime(timeString) {
    const [hourString, minute] = timeString.split(":");
    const hour = +hourString % 24;
    return (hour % 12 || 12) + ":" + minute + (hour < 12 ? "AM" : "PM");
}

const tests = [
    "18:00:00",
    "6:00:00",
    "06:00:00",
    "12:00:00",
    "00:00:00",
    "24:00:00",
];
for (const s of tests) {
    console.log(formatTime(s));
}

edited Sep 06 '22 at 20:32

answered Dec 16 '12 at 03:59

gilly3

87,962
25
144
176

thanks for the function using substr. Since HBP's solution removes the seconds chunk, I'm giving him the green check even though your answer was the first in. Besides, he's only at 3K; you're rolling in points with 21K :-) – Tim Dec 16 '12 at 11:05
Ah. Somehow I didn't notice that you wanted to remove the seconds. – gilly3 Dec 16 '12 at 15:54
what if its 12:30 PM – iamsaksham May 09 '16 at 11:41
@isaksham - 12:30 PM expressed as HH:MM:SS is 12:30:00. If you use `var timeString = "12:30:00"` in my code above, you will get output of `"12:30PM"`, as expected. I worked with a group of Russians once who were baffled by the American way of using AM and PM. It made no sense to them to transition from 11:59 AM to 12:00 PM. The explanation is that PM means "after mid-day", and noon is mid-day. – gilly3 May 09 '16 at 17:54
@gilly3 how to display two digit hour instead of one like `06:30` instead of `6:30` – Saroj Shrestha May 26 '19 at 14:58
@SarojShrestha - You can use [`padStart()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart). If your site supports IE, be sure to include the polyfill. – gilly3 Jun 06 '19 at 16:07
Thanks for the answer, but can we not use more than a single character for variable names? It's so unclear the difference between "h" and "H"? – Vincent Aug 23 '22 at 17:35
@Vincent - of course! Stackoverflow is for learning, not for copy and paste. Name your variables how you like. I used `H` and `h` because it corresponds to some common date format string variables, where lowercase h corresponds to 12-hour time, and uppercase H corresponds to 24-hour time, but if those conventions are unfamiliar to you, use whatever variable names you like in your code. – gilly3 Aug 23 '22 at 19:49
@gilly3 I realize I can use whatever variable names I like, so I think my previous comment was slightly unclear. I just meant, that for the sake of clarity, when showing sample code it would be really helpful if the variable names were descriptive. As you said, this is for learning, so it's just much easier to understand / learn if the variable names are clear in the example. Thanks! – Vincent Aug 24 '22 at 17:43

score 15 · Answer 4 · answered Nov 30 '16 at 21:35

Based on gilly3's answer.

If you want to convert:

 08:00 to 08:00 AM 
 16:00 to 04:00 PM

Then this will work:

function tConv24(time24) {
  var ts = time24;
  var H = +ts.substr(0, 2);
  var h = (H % 12) || 12;
  h = (h < 10)?("0"+h):h;  // leading 0 at the left for 1 digit hours
  var ampm = H < 12 ? " AM" : " PM";
  ts = h + ts.substr(2, 3) + ampm;
  return ts;
};

https://jsfiddle.net/fpjs9g0L/

score 13 · Answer 5 · answered Nov 15 '19 at 13:51

Short ES6 code

const convertFrom24To12Format = (time24) => {
  const [sHours, minutes] = time24.match(/([0-9]{1,2}):([0-9]{2})/).slice(1);
  const period = +sHours < 12 ? 'AM' : 'PM';
  const hours = +sHours % 12 || 12;

  return `${hours}:${minutes} ${period}`;
}

const convertFrom12To24Format = (time12) => {
  const [sHours, minutes, period] = time12.match(/([0-9]{1,2}):([0-9]{2}) (AM|PM)/).slice(1);
  const PM = period === 'PM';
  const hours = (+sHours % 12) + (PM ? 12 : 0);

  return `${('0' + hours).slice(-2)}:${minutes}`;
}

score 13 · Answer 6 · answered Dec 23 '20 at 09:57

It will be better to use momentjs

Just a little conversation "2 PM" to "14.00"

const number = moment("02:00 PM", ["h:mm A"]).format("HH:mm");
cosole.log(number);

// "14.00" "14.00" to "2 PM"

const number = moment("14.00", ["HH.mm"]).format("hh:mm a");
cosole.log(number); // "02:00 pm"

akhil singhal · Answer 7 · 2019-08-26T14:19:13.010

6

A simple code for this will be

time = time.split(':');// here the time is like "16:14"
let meridiemTime = time[0] >= 12 && (time[0]-12 || 12) + ':' + time[1] + ' PM' || (Number(time[0]) || 12) + ':' + time[1] + ' AM';

You can adjust according to your time format

edited Aug 26 '19 at 14:19

answered Aug 26 '19 at 13:44

akhil singhal

111
1
7

LouInAL · Answer 8 · 2015-10-16T15:53:55.847

Researching this same question I have come across several complicated, hard to understand solutions, and then it dawned on me: There is a very simple solution that doesn't rely on hard-to-read regular expressions or other complicated code. Unless I am missing something obvious, this is an extremely simple, easy to understand solution:

function timeTo12HrFormat(time)
{   // Take a time in 24 hour format and format it in 12 hour format
    var time_part_array = time.split(":");
    var ampm = 'AM';

    if (time_part_array[0] >= 12) {
        ampm = 'PM';
    }

    if (time_part_array[0] > 12) {
        time_part_array[0] = time_part_array[0] - 12;
    }

    formatted_time = time_part_array[0] + ':' + time_part_array[1] + ':' + time_part_array[2] + ' ' + ampm;

    return formatted_time;
}



var time = timeTo12HrFormat(18:00:00);
console.log(time);  // 6:00:00 PM

Down voted : timeTo12HrFormat("00:00:00") gives "0:00:00 AM" instead of "12:00:00 AM" — Frédéric Camblor, Jun 25 '18 at 06:20

score 4 · Answer 9 · answered Sep 28 '21 at 12:04

4

By Using Moment library we can convert 24 hour time format to 12 hour format.

moment('20:00', 'hh:mm').format('hh:mm')

//// output: 08:00

if you want to convert into AM and PM

moment('20:00', 'hh:mm a').format('hh:mm a')

//// output: 08:00 pm

answered Sep 28 '21 at 12:04

Mirza Hayat

284
5
11

score 2 · Answer 10 · answered May 18 '22 at 02:40

if you need to get time without seconds at the output

const convertTime24to12 = (time24h) => {
  let time = time24h
    .toString()
    .match(/^([01]\d|2[0-3])(:)([0-5]\d)(:[0-5]\d)?$/) || [time24h];

  if (time.length > 1) {
    time = time.slice(1, -1);
    time[5] = +time[0] < 12 ? ' am' : ' pm';
    time[0] = +time[0] % 12 || 12;
  }
  return time.join(''); 
};

15:40:00

console.log(convertTime24to12("13:40:00"));

03:40

score 1 · Answer 11 · answered Jan 11 '19 at 07:43

function timeformat(date1) {
  var date=new Date(date1);
  var month = date.toLocaleString('en-us', { month: 'long' });
  var mdate  =date.getDate();
  var year  =date.getFullYear();
  var hours = date.getHours();
  var minutes = date.getMinutes();
  var ampm = hours >= 12 ? 'pm' : 'am';
  hours = hours % 12;
  hours = hours ? hours : 12; // the hour '0' should be '12'
  minutes = minutes < 10 ? '0'+minutes : minutes;
  var strTime = mdate+"-"+month+"-"+year+" "+hours + ':' + minutes + ' ' + ampm;
  return strTime;
}
var ampm=timeformat("2019-01-11 12:26:43");
console.log(ampm);

Here the Function to Convert time into am or pm with Date,it may be help Someone.

score 1 · Answer 12 · answered Mar 10 '22 at 17:05

function timeConversion(s) {
  if (s.trim().endsWith("PM")) {
    return s
      .replace(/\d{2}/, (_) => {
        return Number(_) === 12 ? 12 : Number(_) + 12;
      })
      .replace("PM", "");
  } else {
    if (s.trim().startsWith("12")) {
      return s.replace("12", "00").replace("AM", "");
    } else {
      return s.replace("AM", "");
    }
  }
}

score 1 · Answer 13 · answered Sep 19 '22 at 13:59

let hour = '12:01:00:pm'.split(':');
function getTime2(hr){
    hr[0] = +hr[0];//hr
    hr[1] = +hr[1]; //min
    hr[2] = +hr[2];//sec
    //hr[3] am/pm
    if(hr[1] < 10){
        hr[1] = `0${hr[1]}`;
    }
    if(hr[2] < 10){
        hr[2] = `0${hr[2]}`;
    }
    let time = '';
        //hr:min:sec:am/pm
    if(hr[0] === 12 && hr[3] === "am"){
        time += `00:${hr[1]}:${hr[2]}`
    }
    else if(hr[0] ===12 && hr[3] === "pm"){
        time += `${hr[0]}:${hr[1]}:${hr[2]}`
    }
    else if(hr[0] < 12 && hr[3] === "am"){
        time += `${hr[0]}:${hr[1]}:${hr[2]}`
    }
    else if(hr[0] < 12 && hr[3] === "pm"){
        time += `${12+hr[0]}:${hr[1]}:${hr[2]}`
    }
    return time;
}


console.log(getTime2(hour));

score 0 · Answer 14 · answered Nov 25 '16 at 12:23

Assuming you will get the date string in a proper format, I have a solution.

function parseDateTime(dt) {
        var date = false;
        if (dt) {
            var c_date = new Date(dt);
            var hrs = c_date.getHours();
            var min = c_date.getMinutes();
            if (isNaN(hrs) || isNaN(min) || c_date === "Invalid Date") {
                return null;
            }
            var type = (hrs <= 12) ? " AM" : " PM";
            date = ((+hrs % 12) || hrs) + ":" + min + type;
        }
        return date;
    }

    parseDateTime("2016-11-21 12:39:08");//"12:39 AM"
    parseDateTime("2017-11-21 23:39:08");//"11:39 PM"

score 0 · Answer 15 · answered Apr 08 '18 at 17:56

Make sure that your time is in this format HH:MM:SS(PM/AM)

function timeConversion(s) {

    s = s.split(':');
    var time = s[2];
    if(time.charAt(2) === 'A' && parseInt(s[0]) == 12) s[0] = '00';
    if(time.charAt(2) === 'P' && parseInt(s[0]) <12) s[0] = parseInt(s[0])+12;
    if(s[0] >=24) s[0]-=24;
    var x = time.split('').slice(0,2);
    s[2] = x.join('');
    console.log(s.join(':'));
}

score 0 · Answer 16 · answered Apr 25 '18 at 14:05

Here's a few variations that will work.

const oneLiner = (hour = "00", min = "00", sec = "00") => `${(hour % 12) || 12}:${("0" + min).slice(-2)}:${sec} ${(hour < 12) ? 'am' : 'pm'}`
console.log('oneliner', oneLiner(..."13:05:12".split(":")))



const oneLinerWithObjectInput = ({hour = "00", min = "00", sec = "00"} = {}) => `${(hour % 12) || 12}:${("0" + min).slice(-2)}:${sec} ${(hour < 12) ? 'am' : 'pm'}`
console.log('onelinerWithObjectInput', oneLinerWithObjectInput({
   hour: "13:05:12".split(":")[0],
   min: "13:05:12".split(":")[1],
   sec: "13:05:12".split(":")[2]
}))


const multiLineWithObjectInput = ({hour = "00", min = "00", sec = "00"} = {}) => {
   const newHour = (hour % 12) || 12
       , newMin  = ("0" + min).slice(-2)
       , ampm    = (hour < 12) ? 'am' : 'pm'
   return `${newHour}:${newMin}:${sec} ${ampm}`
}
console.log('multiLineWithObjectInput', multiLineWithObjectInput({
   hour: "13:05:12".split(":")[0],
   min: "13:05:12".split(":")[1],
   sec: "13:05:12".split(":")[2]
}))

score 0 · Answer 17 · answered May 04 '18 at 06:19

0

Here's my way using if statements.

const converTime = (time) => {
  let hour = (time.split(':'))[0]
  let min = (time.split(':'))[1]
  let part = hour > 12 ? 'pm' : 'am';
  
  min = (min+'').length == 1 ? `0${min}` : min;
  hour = hour > 12 ? hour - 12 : hour;
  hour = (hour+'').length == 1 ? `0${hour}` : hour;

  return (`${hour}:${min} ${part}`)
}

console.log(converTime('18:00:00'))
console.log(converTime('6:5:00'))

answered May 04 '18 at 06:19

avc

33
4

4

Bug: `00:08:00` is converted to `00:08 am` instead of `12:08 am`. – Vadim May 22 '18 at 19:01

score 0 · Answer 18 · edited Sep 12 '18 at 10:32

This might help to format if you are using ES6.
Below code snippet will ignore the seconds. If you want to consider seconds you can add that as the first parameter.

   const formatFrom24Hrsto12Hrs = (time, ignoreZero = true) => {
      let [hours, minutes] = time.split(':')
      let modifier = +hours < 12 ? 'am' : 'pm'
      hours = +hours % 12 || 12
      minutes = ignoreZero && +minutes === 0 ? '' : `:${minutes}`
      return hours + minutes + modifier
    }

jameygleason · Answer 19 · 2018-09-17T15:48:49.847

Thanks to @HBP for paving the way here!

I found this to add a little flexibility to the solution.

The RegEx has been updated to accommodate times before noon.

This solution allows you to pass any string to it. As long as a valid time (in this format 18:00 || 18:00:00 || 3:00 || 3:00:00) is somewhere in that string, you're good to go.

Note: you can use just the militaryToTweleveHourConverter or take the guts out of the parseTime variable. However, I'm formatting a date from a database with date-fns then passing that formatted date to the converter.

Totally works. Hope this helps.

import dateFns from 'date-fns';



//* +---------------------------+
//* Format ex. Sat 1/1/18 1:00pm
//* +---------------------------+
const formatMonthDayYearTime = date =>
  militaryToTweleveHourConverter(
    dateFns.format(new Date(date), 'ddd M/DD/YY H:mm')
  );

//* +-------------------------------+
//* Convert MILITARY TIME to 12 hour
//* +-------------------------------+
const militaryToTweleveHourConverter = time => {
  const getTime = time.split(' ');

  const parseTime = getTime.map(res => {
    // Check for correct time format and split into components or return non-time units unaltered
    let timeUnit = res
      .toString()
      .match(/^([\d]|[0-1]\d|2[0-3])(:)([0-5]\d)(:[0-5]\d)?$/) || [res];

    console.log('timeUnit', timeUnit);
    // If the time format is matched, it will break the components into an array
    // ie. ["19:00", "19", ":", "00", undefined]
    if (timeUnit.length > 1) {
      // Remove full string match value
      timeUnit = timeUnit.slice(1);
      // Set am/pm and assign it to the last index in the array
      timeUnit[5] = timeUnit[0] < 12 ? 'am' : 'pm';
      // Adjust hours by subtracting 12 from anything greater than 12 and replace the value in the hours index
      timeUnit[0] = timeUnit[0] % 12 || 12;
    }
    // return adjusted time or original string
    return timeUnit.join('');
  });
  // Re-assemble the array pieces into a string
  return parseTime.join(' ');
};


console.log(formatMonthDayYearTime('Sat 9/17/18 18:30'));
// console log returns the following
// Mon 9/17/18 6:30pm

console.log(militaryToTweleveHourConverter('18:30'));
// console log returns the following
// 6:30pm

console.log(militaryToTweleveHourConverter('18:30:09'));
// console log returns the following
// 6:30:09pm

console.log(militaryToTweleveHourConverter('8:30:09'));
// console log returns the following
// 8:30:09am

score 0 · Answer 20 · edited Dec 28 '19 at 18:58

0

function Time_Function() {
var date = new Date()
var time =""
var x= "AM"
if(date.getHours() >12){
    x= "PM"
}
time= date.getHours()%12 + x +":"+ date.getMinutes() +":"+ date.getSeconds()
}

edited Dec 28 '19 at 18:58

Pedram Parsian

3,750
3
19
34

answered Dec 28 '19 at 11:53

Gunjan Kumar

127
1
5

score 0 · Answer 21 · edited Mar 05 '20 at 14:16

0

function timeConversion(s) {
    let hour = parseInt(s.substring(0,2));
    hour = s.indexOf('AM') > - 1 && hour === 12 ? '00' : hour;
    hour = s.indexOf('PM') > - 1 && hour !== 12 ? hour + 12 : hour;
    hour = hour < 10 && hour > 0 ? '0'+hour : hour;

    return hour + s.substring(2,8);
}

edited Mar 05 '20 at 14:16

Linschlager

1,539
11
18

answered Mar 05 '20 at 12:43

dawidek

1

score 0 · Answer 22 · answered Apr 09 '22 at 15:05

i'm using the Temporal Polyfill now: https://github.com/js-temporal/temporal-polyfill#readme

this is as simple as:

import { Temporal } from '@js-temporal/polyfill';
myDate = "2022-04-09T14:23:27.357Z"
Temporal.Instant.from(myDate).toLocaleString('en-US', { hour: 'numeric', minute: 'numeric' });
=> 5:23 PM // its also converting it to my browser's time zone

and if you change 'en-US' to 'de-DE' you'll get 24h instead

score 0 · Answer 23 · answered Jan 24 '23 at 08:08

I code-golfed it into a short and sweet arrow function

c=t=>([h,...r]=t.split(":"),(h=="12"?"12":h%12)+":"+r.join(":")+(h<12?" AM":" PM"))

Here's a version with a bit more readability as well as explicit variable definition.

const convertTime24_12=t=>{
    let [h,...rest]=t.split(":");
    return (h=="12"?"12":h%12)+":"+rest.join(":")+(h<12?" AM":" PM"));
}

Example usage

console.log(convertTime24_12("15:03:05"));
//"3:03:05 PM"

Javascript: convert 24-hour time-of-day string to 12-hour time with AM/PM and no timezone

23 Answers23

Linked

Related