angular 6 owldatetime input format in 24 hours format

Question

I have implemented angular 6 date-time picker (OwlDatetime) by this example: https://stackblitz.com/github/DanielYKPan/owl-examples/tree/date-time-picker?file=src%2Fapp%2Fbasic%2Fbasic.component.html.

I want too change input format to 24 hour format, because now as you can see in stackblitz the picker has 24 hour format, but once time is selected it is displayed in the input with am/pm.

I have tried changing input format, but it did not work:

<input [owlDateTimeTrigger]="dt"                  [ngModel]="test[key.id] | date: HH:mm" 
[owlDateTime]="dt"  (ngModelChange)="test[key.id]=change($event)" >
                        <owl-date-time [pickerType]="'timer'"  #dt>

Could anybody help?

Answer 1

First install :

npm install ng-pick-datetime-moment moment --save;

check in installation logs if aditinal dependency required. something like @angular/core or @angular/cdk etc.

Then: define next:

//somefile.ts
static MY_MOMENT_FORMATS = {
        parseInput: 'LL LT',
        fullPickerInput: 'YYYY-MM-DD HH:mm', /* <---- Here i've rewrited the format */
        datePickerInput: 'LL',
        timePickerInput: 'LT',
        monthYearLabel: 'MMM YYYY',
        dateA11yLabel: 'LL',
        monthYearA11yLabel: 'MM YYYY',
    };

and add in root app.module

//app.module.ts import {OWL_DATE_TIME_FORMATS, OwlDateTimeModule, OwlDateTimeIntl, OWL_DATE_TIME_LOCALE} from 'ng-pick-datetime';

import {MY_MOMENT_FORMATS} from './.../somefile.ts'; 
...
    imports: [
            {provide: OWL_DATE_TIME_FORMATS, useValue: MY_MOMENT_FORMATS}, ]
...

so that is all.

example is here

https://danielykpan.github.io/date-time-picker/#locale-formats

in section 'Use picker with MomentJS'