Convert 24 hours time variable into 12Hours time with AngularJS/jQuery

Question

I'm getting a value from database which is in 24 hours time string. I'm looking for a way to change this string in to 12 hours clock time using angularJS or jQuery.

I can not do any code changes to the back-end(JAVA) or database at the moment.

var offTime = "17:25:11";

I need it to display as : "5:25:11"

please help !

Answer 1

You need to split the value by : , the rebuild it after running the first value through the modulo operator. Try this:

 var offTime = "17:25:11".split(':'); offTime[0] = offTime[0] % 12; var output = offTime.join(':'); alert(output); 

Answer 2

Working off Kabb5's answer I added a bit more logic to determine AM / PM and check for 0 so 0 AM isn't an option.

angular.module('simpleAppFilters').filter('twentyFourToTwelve', function () {
return function (inputTime) {        
    inputTime = inputTime.toString(); //value to string for splitting
    var splitTime = inputTime.split(':');
    var ampm = (splitTime[0] >= 12 ? ' PM' : ' AM'); //determine AM or PM 
    splitTime[0] = splitTime[0] % 12;
    splitTime[0] = (splitTime[0] == 0 ? 12 : splitTime[0] ); //adjust for 0 = 12

    return splitTime.join(':') + ampm;
};
});

Answer 3

Create a filter like this:

app.filter('twentyFourToTwelve ', function () {
  return function (inputTime) {
    var splitTime = inputTime.split(':');
    splitTime[0] = splitTime[0] % 12;

    return splitTime.join(':');        
  };
});

And then in your binding:

{{ myTime | twentyFourToTwelve }}