Working with Custom DateAdapter for Angular Material 2 DatePicker.

This is my first Blog Post on Medium and also it’s the first time that I am writing anything related to Angular Material. The Material 2 project has been rewritten and is in continuous development (Beta phase). The Material team is doing a great job in releasing new components, fixing issues and making life of Angular developers easy :).

Coming back to the topic of my blog: Custom DateAdapter. Recently in my project, I had the scenario where I had to provide a custom date format (YYYY-MM-DD), this format is different from the default format that is provided by the date picker component (MM/DD/YYYY). The documentation says that creating a custom date format (It could be of any format) is as easy as extending the DateAdapter (Trust me, it wasn’t easy for me.) but an example for the same is not yet available on the website. So, I did bit of search on their Github issues page, Stackoverflow and figured out way of implementing our own Custom DateAdapter through many examples.

I created a date-picker.module file that I would like to share it here. This is not something that is not available on the internet, it’s just that it took me sometime to figure it out and so I thought it would be great to have this module as example for anyone looking for creating a custom date adapter.

// Custom DateAdapter
import {NgModule} from '@angular/core';
import {MdDatepickerModule, MdNativeDateModule, NativeDateAdapter, DateAdapter, MD_DATE_FORMATS} from '@angular/material';

// extend NativeDateAdapter's format method to specify the date format.
export class CustomDateAdapter extends NativeDateAdapter {
   format(date: Date, displayFormat: Object): string {
      if (displayFormat === 'input') {
         const day = date.getUTCDate();
         const month = date.getUTCMonth() + 1;
         const year = date.getFullYear();
         // Return the format as per your requirement
         return `${year}-${month}-${day}`;
      } else {
         return date.toDateString();
      }
   }
   
   // If required extend other NativeDateAdapter methods.
}

const MY_DATE_FORMATS = {
   parse: {
      dateInput: {month: 'short', year: 'numeric', day: 'numeric'}
   },
   display: {
      dateInput: 'input',
      monthYearLabel: {year: 'numeric', month: 'short'},
      dateA11yLabel: {year: 'numeric', month: 'long', day: 'numeric'},
      monthYearA11yLabel: {year: 'numeric', month: 'long'},
   }
};

@NgModule({
   declarations: [],
   imports: [],
   exports: [MdDatepickerModule, MdNativeDateModule],
   providers: [
      {
         provide: DateAdapter, useClass: CustomDateAdapter
      },
      {
         provide: MD_DATE_FORMATS, useValue: MY_DATE_FORMATS
      }
   ]
})

export class DatePickerModule {

}

This DatePickerModuleneeds to be registered to the main app.module.tsfile and Bingo! You should see the format of the date appearing in the MdDatepicker as provided by you in the above format method.

Cheers to entire Angular Team.

This is it for my first blog post. Do let me know if you have any feedback/suggestions or you find any errors. Thanks!