Skip to main content

​
date-fns Adapter

The date-fns adapter allows you to use the date-fns library with Angular Material date components like Datepicker and Timepicker. Source: /home/daytona/workspace/source/src/material-date-fns-adapter/adapter/date-fns-adapter.ts

​
Installation

npm install @angular/material-date-fns-adapter date-fns

​
Setup

​
Standalone Components

Provide the adapter in your component or at the application level: 
import {Component} from '@angular/core';
import {provideNativeDateAdapter} from '@angular/material/core';
import {provideDateFnsAdapter} from '@angular/material-date-fns-adapter';
import {MatDatepickerModule} from '@angular/material/datepicker';

@Component({
  selector: 'app-datepicker',
  imports: [MatDatepickerModule],
  providers: [provideDateFnsAdapter()],
  template: `
    <mat-form-field>
      <input matInput [matDatepicker]="picker" />
      <mat-datepicker-toggle matSuffix [for]="picker" />
      <mat-datepicker #picker />
    </mat-form-field>
  `
})
export class DatepickerComponent {}

​
NgModule

Provide the adapter in your module: 
import {NgModule} from '@angular/core';
import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';
import {DateFnsAdapter, MAT_DATE_FNS_FORMATS} from '@angular/material-date-fns-adapter';
import {MatDatepickerModule} from '@angular/material/datepicker';

@NgModule({
  imports: [MatDatepickerModule],
  providers: [
    {provide: DateAdapter, useClass: DateFnsAdapter},
    {provide: MAT_DATE_FORMATS, useValue: MAT_DATE_FNS_FORMATS}
  ]
})
export class AppModule {}

​
Localization

Provide a locale from date-fns: 
import {Component} from '@angular/core';
import {MAT_DATE_LOCALE} from '@angular/material/core';
import {provideDateFnsAdapter} from '@angular/material-date-fns-adapter';
import {enUS, es, fr, de} from 'date-fns/locale';

@Component({
  selector: 'app-datepicker',
  providers: [
    provideDateFnsAdapter(),
    {provide: MAT_DATE_LOCALE, useValue: es} // Spanish locale
  ],
  // ...
})
export class DatepickerComponent {}
Or provide it globally: 
import {ApplicationConfig} from '@angular/core';
import {MAT_DATE_LOCALE} from '@angular/material/core';
import {provideDateFnsAdapter} from '@angular/material-date-fns-adapter';
import {es} from 'date-fns/locale';

export const appConfig: ApplicationConfig = {
  providers: [
    provideDateFnsAdapter(),
    {provide: MAT_DATE_LOCALE, useValue: es}
  ]
};

​
Custom Date Formats

Customize how dates are displayed and parsed: 
import {Component} from '@angular/core';
import {MAT_DATE_FORMATS} from '@angular/material/core';
import {provideDateFnsAdapter} from '@angular/material-date-fns-adapter';

const CUSTOM_DATE_FORMATS = {
  parse: {
    dateInput: 'P', // Short date format
  },
  display: {
    dateInput: 'P',
    monthYearLabel: 'MMM yyyy',
    dateA11yLabel: 'PP',
    monthYearA11yLabel: 'MMMM yyyy',
  },
};

@Component({
  selector: 'app-datepicker',
  providers: [
    provideDateFnsAdapter(),
    {provide: MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS}
  ],
  // ...
})
export class DatepickerComponent {}

​
DateFnsAdapter API

The DateFnsAdapter class extends Angular Material’s DateAdapter and implements all required methods.

​
Key Methods

Implemented from /home/daytona/workspace/source/src/material-date-fns-adapter/adapter/date-fns-adapter.ts:58:
  • getYear(date: Date): number - Get the year
  • getMonth(date: Date): number - Get the month (0-11)
  • getDate(date: Date): number - Get the day of month
  • getDayOfWeek(date: Date): number - Get day of week (0-6)
  • getMonthNames(style) - Get month names in given style
  • getDateNames() - Get array of date names
  • getDayOfWeekNames(style) - Get day names in given style
  • getYearName(date: Date): string - Get year as string
  • getFirstDayOfWeek(): number - Get first day of week (locale-dependent)
  • getNumDaysInMonth(date: Date): number - Get days in month
  • clone(date: Date): Date - Clone a date
  • createDate(year, month, date): Date - Create a new date
  • today(): Date - Get today’s date
  • parse(value, parseFormat) - Parse a date string
  • format(date, displayFormat): string - Format a date
  • addCalendarYears(date, years): Date - Add years
  • addCalendarMonths(date, months): Date - Add months
  • addCalendarDays(date, days): Date - Add days
  • toIso8601(date): string - Convert to ISO 8601 string
  • isDateInstance(obj): boolean - Check if value is a Date
  • isValid(date): boolean - Check if date is valid
  • invalid(): Date - Create an invalid date

​
Time Support

The adapter also supports time operations:
  • setTime(target, hours, minutes, seconds): Date
  • getHours(date): number
  • getMinutes(date): number
  • getSeconds(date): number
  • parseTime(value, parseFormat)
  • addSeconds(date, amount): Date

​
Date Format Tokens

date-fns uses specific format tokens. Common ones:
  • P - Short date (e.g., 04/29/2023)
  • PP - Medium date (e.g., Apr 29, 2023)
  • PPP - Long date (e.g., April 29th, 2023)
  • PPPP - Full date (e.g., Saturday, April 29th, 2023)
  • p - Short time (e.g., 12:00 AM)
  • pp - Medium time (e.g., 12:00:00 AM)
  • yyyy - 4-digit year
  • MM - 2-digit month
  • dd - 2-digit day
  • MMMM - Full month name
  • MMM - Short month name
  • EEEE - Full day name
  • EEE - Short day name
See the date-fns format documentation for all tokens.

​
Example with Datepicker

import {Component, signal} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {provideDateFnsAdapter} from '@angular/material-date-fns-adapter';
import {MatDatepickerModule} from '@angular/material/datepicker';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatInputModule} from '@angular/material/input';
import {MAT_DATE_LOCALE} from '@angular/material/core';
import {enUS} from 'date-fns/locale';

@Component({
  selector: 'app-date-form',
  imports: [
    ReactiveFormsModule,
    MatFormFieldModule,
    MatInputModule,
    MatDatepickerModule
  ],
  providers: [
    provideDateFnsAdapter(),
    {provide: MAT_DATE_LOCALE, useValue: enUS}
  ],
  template: `
    <mat-form-field>
      <mat-label>Choose a date</mat-label>
      <input matInput [matDatepicker]="picker" [formControl]="dateControl" />
      <mat-datepicker-toggle matSuffix [for]="picker" />
      <mat-datepicker #picker />
    </mat-form-field>
    
    @if (dateControl.value) {
      <p>Selected: {{dateControl.value | date:'fullDate'}}</p>
    }
  `
})
export class DateFormComponent {
  dateControl = new FormControl(new Date());
}

​
Example with Timepicker

import {Component} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {provideDateFnsAdapter} from '@angular/material-date-fns-adapter';
import {MatTimepickerModule} from '@angular/material/timepicker';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatInputModule} from '@angular/material/input';

@Component({
  selector: 'app-time-form',
  imports: [
    ReactiveFormsModule,
    MatFormFieldModule,
    MatInputModule,
    MatTimepickerModule
  ],
  providers: [provideDateFnsAdapter()],
  template: `
    <mat-form-field>
      <mat-label>Choose a time</mat-label>
      <input matInput [matTimepicker]="picker" [formControl]="timeControl" />
      <mat-timepicker-toggle matSuffix [for]="picker" />
      <mat-timepicker #picker />
    </mat-form-field>
  `
})
export class TimeFormComponent {
  timeControl = new FormControl(new Date());
}

​
Why Use date-fns?

  • Lightweight: Modular and tree-shakeable
  • Immutable: All functions return new dates
  • Type-safe: Full TypeScript support
  • i18n: Support for 100+ locales
  • Modern: Works with ES modules
  • Comprehensive: 200+ date utility functions

​
Comparison with Other Adapters

Featuredate-fnsMoment.jsLuxon
Bundle sizeSmallLargeMedium
Tree-shakingYesNoYes
ImmutableYesNo*Yes
Active developmentYesDeprecatedYes
TypeScriptNativeVia @typesNative
*Moment.js is mutable by default but has an immutable mode

​
Source Code

View the DateFnsAdapter source code on GitHub.

Build docs developers (and LLMs) love

Get started for freeTalk to us