How to set owl datetime picker format programmatically?

问题

I have been using until recently this datetime picker...

https://www.npmjs.com/package/ng-pick-datetime

Overall it's a pretty nice project, even though it hasn't been worked on in a while. However, I'm facing a problem with it. I would like to be able to change the represented format (not the actual data, that is perfectly fine) to the user and that at any time possible.

The user is allowed to change the format of dates the way they want them to be. So formats can look like these examples:

"20-12-2009"
"12/20/2009"
"2009 12 20"

I get the format preference from my backend, which in return is being used in all displaying components. Tables, or just any value that it can be applied to.

However, this application doesn't offer any way of changing the format aside the method "setLocale()". This is not much of a solution, as that literally translates the calendar to the corresponding language. So according to the documentation you can supply the component - in conjunction with moment.js - your own formats. Kinda like this...

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 {
}

It works, as expected, very well. However, I would like to be able to change this programmatively later on... which sadly shows that I'm lacking understanding in coding. While I technically CAN apply...

@ViewChild('picker') picker: any; 
...
ngAfterViewInit() {
this.picker.datetimeFormat = {
// new format...
}
}

It's not feasible on my end, because I might or might not have a datepicker on my form, depending what fields have been clicked.

来源：https://stackoverflow.com/questions/56129112/how-to-set-owl-datetime-picker-format-programmatically

标签

angular

typescript

datetimepicker