How can I remove milliseconds from a time input field in android?


Why does my time field show seconds and milliseconds (E.g. 5:25:44.792 PM) in my time picker for android 4.2 (physical device)? Is there a way I can force it to exclude seconds and milliseconds (5:25 PM)? iOS device shows 5:25 PM as expected.

Also, is it possible to fix text-right alignment for input=date and input=time so fields appear flush to the right? iOS looks correct, android has a bit of right padding.


$scope.formData = {
    msm_date: new Date(),
    msm_time: new Date(),
    msm_rate: null


<ion-item class="item-input">
    <span class="input-label">Date</span>
    <input type="date" ng-model="formData.msm_date" class="text-right" required>
<ion-item class="item-input">
    <span class="input-label">Time</span>
    <input type="time" ng-model="formData.msm_time" class="text-right" required>
<ion-item class="item-input">
    <span class="input-label">L/min</span>
    <input type="tel" ng-model="formData.msm_rate" class="text-right" placeholder="0" required numbers-only>

  1. This post explains why milliseconds are being shown and offers a directive to correct the formatting. Works great!

    .directive(‘ngModel’, function( $filter ) {
    return {
    require: ‘?ngModel’,
    link: function(scope, elem, attr, ngModel) {
    if( !ngModel )
    if( attr.type !== ‘time’ )

             ngModel.$formatters.unshift(function(value) {
                 return value.replace(/:\d{2}[.,]\d{3}$/, '')


  2. Set padding-right: 0 to fix alignment issue. UPDATE, this breaks formatting in newer browsers. Not solved.



use this on your Date object:

function stripMillisecondsfromDate(date) {
  return new Date(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds());


use filter like | date:'yyyy-MM-dd HH:mm:ss Z