Skip to content

Instantly share code, notes, and snippets.

@wottpal

wottpal/date-formats.ts

Created April 18, 2019 15:10
Show Gist options
  • Save wottpal/4211f4c01c41b16be181110273cff5a9 to your computer and use it in GitHub Desktop.
Save wottpal/4211f4c01c41b16be181110273cff5a9 to your computer and use it in GitHub Desktop.
Download ZIP
Custom DateFormats & DateAdapter for Angular Material MatDatepicker using Day.js
Raw
date-formats.ts
import { Platform } from '@angular/cdk/platform';
import { NativeDateAdapter } from '@angular/material';
import * as dayjs from 'dayjs';
import 'dayjs/locale/de';
import * as customParseFormat from 'dayjs/plugin/customParseFormat';
import * as localizedFormat from 'dayjs/plugin/localizedFormat';
/**
* Custom Date-Formats and Adapter (using https://github.com/iamkun/dayjs)
*/
export const AppDateFormats = {
parse: {
dateInput: 'DD.MM.YYYY',
},
display: {
dateInput: 'DD.MM.YYYY',
monthYearLabel: 'MMM YYYY',
dateA11yLabel: 'LL',
monthYearA11yLabel: 'MMMM YYYY',
}
}
export class AppDateAdapter extends NativeDateAdapter {
constructor(matDateLocale: string, platform: Platform) {
super(matDateLocale, platform)
// Initalize DayJS-Parser
dayjs.locale('de')
dayjs.extend(customParseFormat)
dayjs.extend(localizedFormat)
}
parse(value: any): Date | null {
return dayjs(value, 'DD.MM.YYYY').toDate()
}
format(date: Date, displayFormat: any): string {
return dayjs(date).format(displayFormat)
}
}
Raw
shared.module.ts
/* ... */
/* Adding Providers in a Shared- or App-Module */
@NgModule({
providers: [
{
provide: DateAdapter,
useClass: AppDateAdapter,
deps: [MAT_DATE_LOCALE, Platform]
},
{
provide: MAT_DATE_FORMATS,
useValue: AppDateFormats
}
]
})
export class SharedModule { }
@gmcfarlane
Copy link

is there a stackblitz that shows this working? I am struggling getting the declarations right. Yes, newbie woes...

@wottpal
Copy link
Author

wottpal commented Sep 29, 2022

@gmcfarlane sorry, can’t help you with that. stopped using angular & material a while ago 🤷‍♂️

@gmcfarlane
Copy link

gmcfarlane commented Sep 29, 2022 via email

@wottpal
Copy link
Author

wottpal commented Sep 29, 2022

@gmcfarlane nextjs (react, typescript). never looked back after learning it – much nicer to work with imo.

@gmcfarlane
Copy link

gmcfarlane commented Sep 29, 2022 via email

@ice-blaze
Copy link

You saved my day. I used yours as inspiration. I wanted the default adapter just change the date format.

import {
  DateAdapter,
  MAT_DATE_FORMATS,
  MAT_DATE_LOCALE,
  NativeDateAdapter,
} from '@angular/material/core';

const DATE_FORMATS = {
  parse: {
    dateInput: 'dd.MM.yyyy',
  },
  display: {
    dateInput: 'dd.MM.yyyy',
    monthYearLabel: 'yyyy',
    dateA11yLabel: 'dd.MM.yyyy',
    monthYearA11yLabel: 'yyyy',
  },
};

class AppDateAdapter extends NativeDateAdapter {
  public constructor(matDateLocale: string) {
    super(matDateLocale);
  }

  public format(date: Date, displayFormat: string): string {
    if (displayFormat === 'dd.MM.yyyy') {
      return date.toLocaleDateString('de-CH', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
      });
    } else {
      return date.getFullYear().toString();
    }
  }
}

export const DateAdapterProviders = [
  { provide: MAT_DATE_FORMATS, useValue: DATE_FORMATS },
  {
    provide: DateAdapter,
    useClass: AppDateAdapter,
    deps: [MAT_DATE_LOCALE],
  },
];

@Rizwantahreem
Copy link

had you made a new class 'AppDateAdapter' here?

@ice-blaze
Copy link

Not really, just override the the format function. But couldn't find any example on the web and yours helped me. I wanted to share my variant just in case someone would need it. (I decided to keep most of my dates with the default javascript object for now. I don't have enough situations were a date library would be needed)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment