Trabalhando com DateAdapter personalizado para Angular Material 2 DatePicker.

Este é o meu primeiro Blog Post no Medium e também é a primeira vez que estou escrevendo algo relacionado a Material Angular . O projeto do Material 2 foi reescrito e está em desenvolvimento contínuo (fase Beta). A equipe de materiais está fazendo um ótimo trabalho no lançamento de novos componentes, consertando problemas e facilitando a vida dos desenvolvedores Angular :).

Voltando ao tópico do meu blog: Custom DateAdapter . Recentemente, em meu projeto, tive o cenário em que tive que fornecer um formato de data personalizado (AAAA-MM-DD), este formato é diferente do formato padrão que é fornecido pelo componente selecionador de data (MM / DD / AAAA). A documentação diz que criar um formato de data personalizado (pode ser de qualquer formato) é tão fácil quanto estender o DateAdapter (acredite, não foi fácil para mim.) Mas um exemplo do mesmo ainda não está disponível no site . Então, fiz uma pequena pesquisa na página de problemas do Github, Stackoverflow, e descobri uma maneira de implementar nosso próprio DateAdapter personalizado por meio de muitos exemplos.

Criei um arquivo date-picker.module que gostaria de compartilhá-lo aqui. Isso não é algo que não esteja disponível na internet, é que demorei um pouco para descobrir e então pensei que seria ótimo ter este módulo como exemplo para quem está procurando criar um adaptador de data personalizado.

// 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 {

}

Saudações a toda a equipe Angular .

Esta é a minha primeira postagem no blog. Entre em contato se tiver algum feedback / sugestão ou se encontrar algum erro. Obrigado!