Supports for Custom DateFormat / DateTimeFormat

[f-aubert]

Presently when trying to use custom MAT_DATE_FORMATS as documented in angular material reference, , I'm still unable to have the date displayed properly...

I'm using following import import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE, MatDatepickerModule, MomentDateModule, MomentDateAdapter} from '@coachcare/datepicker';

As well as following Config

export` const MY_FORMATS = {
    parse: {
        dateInput: 'DD.MM.YYYY',
    },
    display: {
        dateInput: 'DD.MM.YYYY',
        monthYearLabel: 'MM YYYY',
        dateA11yLabel: 'DD.MM.YYYY',
        monthYearA11yLabel: 'MM YYYY',
    },
};

And following Providers

providers: [
      {provide: MAT_DATE_LOCALE, useValue: 'de'},
      {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
      {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
],

Might be related to an issue in angular material itself (see stackoverlow https://stackoverflow.com/questions/51019574/angular-material-datepicker-dd-mm-yyyy)

[matheo]

@f-aubert I needed to add more formats for the timepicker, so please adjust MY_FORMATS to this: https://github.com/selvera/npm-datepicker/blob/master/datepicker/src/lib/moment-adapter/moment-date-formats.ts#L11 and tell me if it works!

[f-aubert]

Thank you very much for your answer (and for your datepicker as well!!!). I managed it. I think there still might be a small issue, as in french (locale = fr), with the following,

export const MY_FORMATS: MatDateFormats = {
    parse: {
        datetime: 'DD.MM.YYYY HH:mm',
        date: 'DD.MM.YYYY',
        time: 'HH:mm'
    },
    display: {
        datetime: 'DD.MM.YYYY HH:mm',
        date: 'DD.MM.YYYY',
        time: 'HH:mm',
        monthDayLabel: 'MMMM D',
        monthDayA11yLabel: 'MMMM D',
        monthYearLabel: 'MMMM YYYY',
        monthYearA11yLabel: 'MMMM YYYY',
        dateA11yLabel: 'LLLL',
        timeLabel: 'HH:mm'
    },
};

I still don't see the full date left in white in the blue section properly. Shouldn't it be formatted using 'dateA11yLabel' referring to the locale as defined in momentjs? To me it seems to be something like 'YYYY, MMM D' instead,

[matheo]

@f-aubert I went deep into the dateFormats and now I fixed the issues. I didn't know that parse and display needed to be "equal" to not have problems between the input and the datepicker. Now that I understand the issue, I got them working in 0.9.3 and I added many possible manual input formats :)

About the "left date" I guess you mean the controls? Following the Material Design Guidelines: these have a fixed format and the styles are adjusted to not break, so I'm afraid they are not customizable.

I added some lines to the README. Enjoy! :)

[f-aubert]

Hello, thanks for your great work. You are amazing as the main dev of this awesome component. I was referring to "Thu, Apr 13" on your print screen. It works fine in languages such as English and German, but in french it writes "lun, juillet 2" (and should be lun, 2 juillet). I'm still trying to figure out which display property is responsible... I thought it was dateA11yLabel: 'LLLL'.

[matheo]

@f-aubert you can customize the "Apr 13" with monthDayLabel which is MMM D :) And thanks for your kind words!

[MichalK6677]

I am not able to change format.

I can use whatever in DateFormats and there is no change in format.

import { MatDateFormats } from "@coachcare/datepicker";

export const CW_DATE_FORMATS: MatDateFormats  = {
    parse: {
        datetime: 'DD.MM.YYYY HH:mm',
        date: 'DD.MM.YYYY',
        time: 'HH:mm'
    },
    display: {
        datetime: 'DD.MM.YYYY HH:mm',
        date: 'DD.MM.YYYY',
        time: 'HH:mm',
        monthDayLabel: 'YYYYMMDD',
        monthDayA11yLabel: 'YYYYMMDD',
        monthYearLabel: 'YYYYMMDD',
        monthYearA11yLabel: 'YYYYMMDD',
        dateA11yLabel: 'YYYYMMDD',
        timeLabel: 'HH:mm'
    },
};

providers: [
        { provide: DateAdapter, useClass: MomentUtcDateAdapter, deps: [MAT_DATE_LOCALE] },
        { provide: MAT_DATE_FORMATS, useValue: CW_DATE_FORMATS },
    ],

Format is not changed:

What is wrong with my code? This code works with native material date picker.

[matheo]

@MichalK6677 where is your MomentUtcDateAdapter from? that class may follow another set of formats. I see it mentioned here https://stackoverflow.com/questions/48710053/day-incorrect-in-angular-material-datepicker

[MichalK6677]

@matheo yes. That's the class I used from stackoverflow. It just extends MomentDateAdapter and override createDate

[MichalK6677]

I can use native MomentDateAdapter but formats is still not changed. Do you have an example where it works?

[matheo]

@MichalK6677 are you using the official Adapter of the one imported from @coachcare/datepicker? I've tested our adapter and it shows the formats correctly.

[MichalK6677]

@matheo now it works. Yes I forgot to change one import :) thanks. Great job this datetimepicker