Angular Material 2 DatePicker için Custom DateAdapter ile çalışma.

Bu, Medium'daki ilk Blog Postam ve aynı zamanda Angular Material ile ilgili herhangi bir şey yazıyorum . Materyal 2 projesi yeniden yazıldı ve sürekli geliştiriliyor (Beta aşaması). Materyal ekibi, yeni bileşenleri yayınlamak, sorunları çözmek ve Angular geliştiricilerin hayatını kolaylaştırmak için harika bir iş çıkarıyor :).

Blogumun konusuna geri dönersek : Custom DateAdapter . Son zamanlarda projemde, özel bir tarih biçimi (YYYY-AA-GG) sağlamam gereken bir senaryo vardı, bu biçim, tarih seçici bileşeni (AA / GG / YYYY) tarafından sağlanan varsayılan biçimden farklı. Belgeler, özel bir tarih formatı oluşturmanın (herhangi bir formatta olabilir) DateAdapter'ı genişletmek kadar kolay olduğunu söylüyor (Bana güvenin, benim için kolay değildi.), Ancak aynısı için bir örnek henüz web sitesinde mevcut değil . Bu yüzden, Github sorunları sayfasında, Stackoverflow'da biraz araştırma yaptım ve birçok örnekle kendi Custom DateAdapter'ımızı uygulamanın yolunu buldum.

Burada paylaşmak istediğim bir tarih seçici.module dosyası oluşturdum. Bu internette bulunmayan bir şey değil, sadece onu anlamam bir zaman aldı ve bu yüzden bu modülü özel bir tarih adaptörü oluşturmak isteyenler için örnek olarak almanın harika olacağını düşündüm.

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

}

Tüm Angular Team'e teşekkürler .

Bu benim ilk blog yazım için. Herhangi bir geri bildiriminiz / öneriniz varsa veya herhangi bir hata bulursanız bana bildirin. Teşekkürler!