date-fns angular material adapter

date-fns-date-adapter.ts

import { Injectable } from '@angular/core';
import { DateAdapter } from '@angular/material';
import { addDays, addMonths, addYears, getDate, getDaysInMonth, getMonth, getYear } from 'date-fns';
import { format, parse, setDay, setMonth, toDate, Locale } from 'date-fns';
import { enUS } from 'date-fns/locale';

export const MAT_DATE_FNS_DATE_FORMATS = {
    parse: {
        dateInput: 'yyyy-MM-dd',
    },
    display: {
        dateInput: 'yyyy-MM-dd',
        monthYearLabel: 'LLL y',
        dateA11yLabel: 'MMMM d, y',
        monthYearA11yLabel: 'MMMM y',
    }
};

// in app.module.ts:
/*
{
  provide: DateAdapter,
  useClass: DateFnsDateAdapter
},
{
  provide: MAT_DATE_FORMATS,
  useValue: MAT_DATE_FNS_DATE_FORMATS
},
 */

@Injectable({
    providedIn: 'root'
})
export class DateFnsDateAdapter extends DateAdapter<Date> {

    private WEEK_STARTS_ON = 1; // 0 sunday, 1 monday...
    private options = { locale: enUS };

    private _range(start: number, end: number): number[] {
        const arr: number[] = [];
        for (let i = start; i <= end; i++) {
            arr.push(i);
        }

        return arr;
    }

    public addCalendarDays(date: Date, days: number): Date {
        return addDays(date, days);
    }

    public addCalendarMonths(date: Date, months: number): Date {
        return addMonths(date, months);
    }

    public addCalendarYears(date: Date, years: number): Date {
        return addYears(date, years);
    }

    public clone(date: Date): Date {
        return toDate(date);
    }

    public createDate(year: number, month: number, date: number): Date {
        const localDate = new Date(year, month, date);
        const offset = localDate.getTimezoneOffset() * 60000;
        const utcDate = new Date(localDate.getTime() - offset);
        return utcDate;
    }

    public format(date: Date, displayFormat: any): string {
        return format(date, displayFormat, this.options);
    }

    public getDate(date: Date): number {
        return getDate(date);
    }

    public getDateNames(): string[] {
        return this._range(1, 31).map(day => String(day));
    }

    public getDayOfWeek(date: Date): number {
        return parseInt(format(date, 'i'), 10);
    }

    public getDayOfWeekNames(style: 'long' | 'short' | 'narrow'): string[] {
        const map = {
            long: 'EEEE',
            short: 'E..EEE',
            narrow: 'EEEEE'
        };

        const formatStr = map[style];
        const date = new Date();

        return this._range(0, 6).map(month => format(setDay(date, month), formatStr, this.options));
    }

    public getFirstDayOfWeek(): number {
        return this.WEEK_STARTS_ON;
    }

    public getMonth(date: Date): number {
        return getMonth(date);
    }

    public getMonthNames(style: 'long' | 'short' | 'narrow'): string[] {
        const map = {
            long: 'LLLL',
            short: 'LLL',
            narrow: 'LLLLL'
        };

        const formatStr = map[style];
        const date = new Date();

        return this._range(0, 11).map(month => format(setMonth(date, month), formatStr, this.options));
    }

    public getNumDaysInMonth(date: Date): number {
        return getDaysInMonth(date);
    }

    public getYear(date: Date): number {
        return getYear(date);
    }

    public getYearName(date: Date): string {
        return format(date, 'yyyy', this.options);
    }

    public invalid(): Date {
        return new Date(NaN);
    }

    public isDateInstance(obj: any): boolean {
        return obj instanceof Date;
    }

    public isValid(date: Date): boolean {
        return date instanceof Date && !isNaN(date.getTime());
    }

    public parse(value: any, parseFormat: any): Date | null {
        return parse(value, parseFormat, new Date());
    }

    public toIso8601(date: Date): string {
        return date.toISOString();
    }

    public today(): Date {
        return new Date();
    }
}