Nicholas Tsaoucis Nicholas Tsaoucis - 22 days ago 5
AngularJS Question

formatting <input type="time"> to 12 hour format with no seconds/milliseconds

I'm trying to format some times for display.

<input ng-change="changeTimeBehaviours()" ng-model="booking.time" type="time" >

How can I add formatting to this to be h:mma format ? (eg 2:30PM)

I used

var _time = new Date().toLocaleTimeString(navigator.language,{hour:'2-digit', minute: '2-digit'});

and it did the job but i cant use that with the type='time' because it expects a date time object not a string.

I'm using

{{booking.time | date:"h:mma"}}

in a template in another section and it works perfectly.


I was using ionic serve to test the app, and it was giving me this as the time

11:59:18.046 PM

when I closed the quit the serve and refreshed the page, chrome had the time flag exactly how I wanted it to be,

11:59 PM

so I've come to the conclusion that its something to do with how ionic or cordova builds the type="time"


Seems to be a localisation issue as it works correctly on ios also.

Answer Source

You are using angularjs expression

{{booking.time | date:"h:mma"}}
Which will filter your data only at UI side. So change logic in your controller similar to this
var sdf = new SimpleDateFormat("HH:mm");
var _time = sdf.format(new Date());