Angular 5 ng-pick-datetime date format

Question

I have mentioned for ng-pick-datetime(5.1.5) in @NgModule provide: OWL_DATE_TIME_LOCALE, useValue: 'en-SG' for date format. Its fine when we open the calendar directly from trigger. But if directly interacted with input box and then opened the calendar it will get change into default format.

import {OWL_DATE_TIME_LOCALE , OwlDateTimeModule, OwlNativeDateTimeModule} from 'ng-pick-datetime';

@NgModule({
declarations: [ParcelCreateComponent],
imports: [      
    OwlDateTimeModule,OwlNativeDateTimeModule
],
providers: [{provide: OWL_DATE_TIME_LOCALE, useValue: 'en-SG'}] 
})

Answer 1

1. Make sure you install ng-pick-datetime-moment
2. Then add: import { OwlMomentDateTimeModule } from 'ng-pick-datetime-moment';

3. Modify custom formats from below

   import { NgModule } from '@angular/core'; import { OwlDateTimeModule, OWL_DATE_TIME_FORMATS} from 'ng-pick-datetime'; import { OwlMomentDateTimeModule } from 'ng-pick-datetime-moment'; // See the Moment.js docs for the meaning of these formats: // https://momentjs.com/docs/#/displaying/format/ export const MY_MOMENT_FORMATS = { parseInput: 'l LT', fullPickerInput: 'l LT', datePickerInput: 'l', timePickerInput: 'LT', monthYearLabel: 'MMM YYYY', dateA11yLabel: 'LL', monthYearA11yLabel: 'MMMM YYYY', }; @NgModule({ imports: [OwlDateTimeModule, OwlMomentDateTimeModule], providers: [ {provide: OWL_DATE_TIME_FORMATS, useValue: MY_MOMENT_FORMATS}, ], }) export class AppExampleModule { }