Datepicker MAT_DATE_FORMATS

[All4Gis]

Hi

I am trying to apply a different format to the datetime (MAT_DATE_FORMATS) but I can't get it to work.

For example, if we use the Material example but use the imports from your library, the date format doesn't work. https://stackblitz.com/angular/nkdkbolbgvg?file=src%2Fapp%2Fdatepicker-formats-example.ts

// import { MatDatepickerModule } from '@angular/material/datepicker'
// import { MatNativeDateModule } from '@angular/material/core'
import { MatDatepickerModule } from '@matheo/datepicker'
import { MatNativeDateModule } from '@matheo/datepicker/core'

Can you add an example? thanks

[matheo]

I play with them in the website of this repository, gotta be careful of all the imports to material/datepicker that could take precedence

[All4Gis]

Thanks for the information. I have finally implemented my own timepicker. I had very specific requirements. Thank you very much. Close this ticket if you want

[Kaizodo]

Same problem i am trying to change the format but its not working

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MyComponent } from './my/my.component';
import { MatDatepickerModule } from '@matheo/datepicker';
import { MatNativeDateModule } from '@matheo/datepicker/core';
// import { MatDatepickerModule } from '@angular/material/datepicker';
import { MomentDateAdapter } from '@angular/material-moment-adapter';
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';

export const MY_FORMATS = {
  parse: {
    dateInput: 'LL',
  },
  display: {
    dateInput: 'LL',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

@NgModule({
  declarations: [
    MyComponent 
  ],
  exports: [
    MyComponent 
  ],
  imports: [
    MatNativeDateModule,
    MatDatepickerModule,
    CommonModule
  ],
  providers: [
    { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
    { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
  ]
})
export class MyComponentModule { }

[neeraj-chhatani]

Hi, I am also facing the same issue i want to display date in YYYY-MM-DD format and after using NativeDateModule it is not working. @matheo if there is any solution pls do let us know

[banut1]

Facing the same, a working example would be gold.

[banut1]

After spending 2 days on this, I managed get it working. Here it is:

import { Platform } from '@angular/cdk/platform';
import { NativeDateAdapter } from '@matheo/datepicker/core';
import * as moment from 'moment';

export class CustomDateAdapter extends NativeDateAdapter {
  constructor(matDateLocale: string, platform: Platform) {
    super(matDateLocale, platform);
  }

  override format(date: Date, displayFormat: string): string {
    return moment(date).format(displayFormat);
  }
}

In my shared module:

import { DateAdapter, NativeDateModule } from '@matheo/datepicker/core';
import { MatDatepickerModule } from '@matheo/datepicker';
import { MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
import { CustomDateAdapter } from './datepicker/custom-date-adapter';
import { Platform } from '@angular/cdk/platform';

...imports: [MatDatepickerModule, NativeDatepickerModule],
providers: [
{
      provide: DateAdapter,
      useClass: CustomDateAdapter,
      deps: [MAT_DATE_LOCALE, Platform],
    },
    {
      provide: MAT_DATE_FORMATS,
      useValue: {
        parse: {
          dateInput: 'DD/MM/YYYY',
          datetimeInput: 'DD/MM/YYYY, hh:mm A',
          timeInput: 'hh:mm A',
          monthInput: 'MM',
          yearInput: 'YYYY',
        },
        display: {
          dateInput: 'DD/MM/YYYY',
          datetimeInput: 'DD/MM/YYYY, hh:mm A',
          timeInput: 'hh:mm A',
          monthInput: 'MM',
          yearInput: 'YYYY',
          dateA11yLabel: 'DD/MM/YYYY',
          monthLabel: 'MMMM',
          monthDayLabel: 'DD MMM',
          monthDayA11yLabel: 'DD MMM',
          monthYearLabel: 'MMM YYYY',
          monthYearA11yLabel: 'MMM YYYY',
          timeLabel: 'hh:mm',
        },
      },
    }],

I also tried using material-moment-adapter and the DateAdapter that comes with it but I did not manage to, so basically wrote my own adapter that uses moment.js.