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

ionic-v1
1

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.

Controller:

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

Template:

<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>
<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>
<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>
</ion-item>

image

2

  1. This post explains why milliseconds are being shown and offers a directive to correct the formatting. Works great! http://mark.zealey.org/2015/01/08/formatting-time-inputs-nicely-with-angularjs

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

             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.

    Time
3

use this on your Date object:

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

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