Praca z Custom DateAdapter for Angular Material 2 DatePicker.

To jest mój pierwszy post na blogu na Medium, a także pierwszy raz, kiedy piszę coś związanego z Angular Material . Projekt Material 2 został przepisany i jest w ciągłym rozwoju (faza Beta). Zespół Material wykonuje świetną robotę, wypuszczając nowe komponenty, naprawiając problemy i ułatwiając życie programistom Angular :).

Wracając do tematu mojego bloga: Custom DateAdapter . Niedawno w moim projekcie miałem scenariusz, w którym musiałem podać niestandardowy format daty (RRRR-MM-DD), ten format różni się od domyślnego formatu, który jest dostarczany przez komponent selektora daty (MM / DD / RRRR). Dokumentacja mówi, że utworzenie niestandardowego formatu daty (może to być dowolny format) jest tak proste, jak rozszerzenie DateAdapter (zaufaj mi, nie było to dla mnie łatwe), ale przykład tego samego nie jest jeszcze dostępny na stronie internetowej . Tak więc przeszukałem ich stronę z problemami na Githubie, Stackoverflow i na wielu przykładach znalazłem sposób implementacji naszego własnego Custom DateAdapter.

Utworzyłem plik date-picker.module, który chciałbym udostępnić tutaj. To nie jest coś, co nie jest dostępne w Internecie, po prostu zajęło mi trochę czasu, aby to rozgryźć, więc pomyślałem, że byłoby wspaniale mieć ten moduł jako przykład dla każdego, kto szuka niestandardowego adaptera daty.

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

}

Pozdrawiam cały zespół Angular .

To jest to na mój pierwszy wpis na blogu. Daj mi znać, jeśli masz jakieś uwagi / sugestie lub znajdziesz jakieś błędy. Dzięki!