ng-matero / extensions

Angular Material Extensions Library.
https://ng-matero.github.io/extensions/
MIT License
393 stars 48 forks source link

MTX_DATETIME_FORMATS not working #80

Closed roddc closed 1 year ago

roddc commented 2 years ago

I want to customize the datetime input display, but it is not working, I copy the example from the docs.

 providers: [
        {
            provide: MTX_DATETIME_FORMATS,
            useValue: {
                parse: {
                    dateInput: 'YYYY-MM-DD',
                    monthInput: 'MMMM',
                    timeInput: 'HH:mm',
                    datetimeInput: 'YYYY-MM-DD HH:mm',
                },
                display: {
                    dateInput: 'YYYY-MM-DD',
                    monthInput: 'MMMM',
                    timeInput: 'HH:mm',
                    datetimeInput: 'yyyy/MM/dd HH:mm:ss',
                    monthYearLabel: 'YYYY MMMM',
                    dateA11yLabel: 'LL',
                    monthYearA11yLabel: 'MMMM YYYY',
                    popupHeaderDateLabel: 'MMM DD, ddd',
                },
            },
        },
    ],

image

nzbin commented 2 years ago

Is there some errors in Console? You can check the demo codes here.

roddc commented 2 years ago

It will throw error if I don't import MtxNativeDatetimeModule, I imported the module, but the format is still the same. Do I have to provide { provide: DateAdapter, useClass: MomentDateAdapter, }, { provide: DatetimeAdapter, useClass: MomentDatetimeAdapter, } ? I don't see these provides in the docs. I am not sure is it because I imported MatDatepickerModule as well.

nzbin commented 2 years ago

I created an online example.

wupaz commented 2 years ago

Seem work on Angular v12 but didn't work on v13 https://angular-be83mm-5yyams.stackblitz.io

nzbin commented 2 years ago

Seem work on Angular v12 but didn't work on v13 https://angular-be83mm-5yyams.stackblitz.io

The demo is v13. I'm not sure where has the problems, maybe you should provide some testing codes.

Itaryn commented 2 years ago

I had the same error and after quite a bit of research it turns out that by adding { provide: DateAdapter, useClass: MomentDateAdapter } it works as expected.

llyrowenjones commented 2 years ago

I had the same error and after quite a bit of research it turns out that by adding { provide: DateAdapter, useClass: MomentDateAdapter } it works as expected.

I had to also install @angular/material-moment-adapter and @ng-matero/extensions-moment-adapter to use the adapter.

I followed @nzbin's above link after installing these to make it work as I wanted.

zzpzaf commented 3 months ago

OK perhaps the solution is outdated now. But, from what I can understand, the solution works only with Moment.js-based adapter, i.e.: @angular/material-moment-adapter and @ng-matero/extensions-moment-adapter (MtxMomentDatetimeModule), and it fails with the native MtxNativeDatetimeModule.