Datetime picker with milliseconds (ion-datetime)

Ionic Framework ionic-v3
1

Hi everyone,

I have a time picker just like this:

<ion-datetime                    
        formControlName="time"
        displayFormat="HH:mm:ss"
        pickerFormat="HH mm ss"
        [cancelText]="'app.button.cancel'|translate"
        [doneText]="'app.button.ok'|translate"
></ion-datetime>

How can I include milliseconds to this input?

My ionic info:

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.19.1
    ionic (Ionic CLI) : 3.19.1

global packages:

    cordova (Cordova CLI) : 8.0.0

local packages:

    @ionic/app-scripts : 3.1.8
    Cordova Platforms  : android 7.0.0 ios 4.5.4
    Ionic Framework    : ionic-angular 3.9.2

System:

    ios-deploy : 1.9.2
    Node       : v8.5.0
    npm        : 5.6.0
    OS         : macOS High Sierra
    Xcode      : Xcode 9.2 Build version 9C40b

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : pro
2

Since Ionic is using ISO 8601 format you will need todo a workaround.

I have never used milliseconds in my application before, but what I am reading out of the documentaion you could do it like this.

displayFormat="HH:mm:ss.s"

Now it should display milliseconds. (I hope so atleast :sweat_smile:)

3

Thanks for the quick response @cherry, but it doesn’t work.

This workaround only adds a duplicate of the seconds picker:

Snip20180205_1
Snip20180205_1.png411×735 28.4 KB

4

I am sorry then, I can’t help you much :disappointed_relieved:.

Maybe this link could be interesting for you!

5

Thank you.

I think I want to try to use masks in a simple ion-input component instead of use ion-datetime picker.

1 Like
6

Finally, I got this using Angular 2 Text Mask and simple ion-input.

Caution: Versions 8.0.3 and above of this library doesn’t work properly, so…

npm install angular2-text-mask@8.0.2 --save