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.

~Edit

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"

~Edit2

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());