Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 915
Tim Avatar asked Dec 16 '12 03:12

Tim


People also ask

How do I convert 24 hour to 12 hour in typescript?

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.

How do you display JavaScript datetime in 12 hour am pm format?

If you don't need to print the am/pm, I found the following nice and concise: var now = new Date(); var hours = now. getHours() % 12 || 12; // 12h instead of 24h, with 12 instead of 0.


2 Answers

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>
like image 188
HBP Avatar answered Sep 17 '22 17:09

HBP


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 attack dates with string methods.

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>
like image 41
bbsimonbb Avatar answered Sep 17 '22 17:09

bbsimonbb