Работа с Custom DateAdapter для Angular Material 2 DatePicker.

Это мой первый пост в блоге на Medium, а также впервые я пишу что-либо, связанное с Angular Material . Проект Material 2 был переписан и находится в постоянной разработке (бета-фаза). Команда Material проделала большую работу по выпуску новых компонентов, исправлению проблем и облегчению жизни разработчиков Angular :).

Возвращаясь к теме моего блога: Custom DateAdapter . Недавно в моем проекте у меня был сценарий, в котором я должен был предоставить настраиваемый формат даты (ГГГГ-ММ-ДД), этот формат отличается от формата по умолчанию, предоставляемого компонентом выбора даты (ММ / ДД / ГГГГ). В документации говорится, что создать собственный формат даты (он может быть любого формата) так же просто, как расширить DateAdapter (поверьте мне, это было непросто для меня.), Но его пример еще не доступен на веб-сайте . Итак, я немного поискал на их странице проблем Github, Stackoverflow, и выяснил, как реализовать наш собственный Custom DateAdapter, используя множество примеров.

Я создал файл date-picker.module, которым хочу поделиться здесь. Это не то, чего нет в Интернете, просто мне потребовалось время, чтобы понять это, и поэтому я подумал, что было бы здорово иметь этот модуль в качестве примера для всех, кто хочет создать настраиваемый адаптер даты.

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

}

Приветствую всю команду Angular .

Это мой первый пост в блоге. Дайте мне знать, если у вас есть отзывы / предложения или вы обнаружите какие-либо ошибки. Благодаря!