Angular - date time picker

Czołem!

Nie śmiejcie się ze mnie ale nie mogę znaleźć rozwiązania pozornie błahego problemu :P Otóż jestem na etapie wyboru frameworka frontendowego dla aplikacji pisanej w Angularze (można uznać, że w najnowszej wersji). Moje główne założenia to licencja MIT i łatwość w pisaniu RWD. Najbardziej spodobał mi się ng-bootstrap: https://ng-bootstrap.github.io
Mam problem z date time pickerem (https://ng-bootstrap.github.io/#/components/datepicker/examples). O ile graficznie jak najbardziej spoko, bo minimalistyczny i spójny z resztą o tyle nie podoba mi się to, że do przechowywania wybranej daty wykorzystuje swoją strukturę zamiast zwykłego typu Date. Generuje to problemy w postaci dodatkowej pracy przy opakowywaniu kontrolki w component oraz konieczność mapowania przy korzystaniu z serwisów, bo backendowe data modele jednak najczęściej korzystają z typu przeznaczonego dla daty.
Wobec powyższego moje pytanie - czy znacie jakąś angularową kontrolkę do wyboru daty na licencji MIT i w miarę neutralną graficznie? Ewentualnie może nie mam racji z krytyką rozwiązania ng-bootstrap?

Za wszelkie odpowiedzi dziękuję z góry i pozdrawiam,
Dawid.

A on czasem nie korzysta z moment.js?

Nie widzę takiej informacji na stronie ng-bootstrap ani w źródłach struktury NgbDateStruct. A co by mi to dawało?

Po prostu napisałeś, że ma inny typ więc podejrzewam że to może być moment.js bo jest to dość popularna biblioteka i często dodawana jako standard do starterów, więc jeśli to ona to bym ze spokojem używał tego komponentu wbudowanego.

A co jeśli to jednak nie moment.js? Nie widzę tego nigdzie w źródłach.

@mr_jaro: Moment.js jest deprecated i wszystkie większe pakiety już zmigrowały. Najpopularniejsze zamienniki to Luxon (od twórcy moment.js) lub date-fns.

Wracając do tematu to chyba rozwiązałem swój problem dzięki adapterom:
https://ng-bootstrap.github.io/#/components/datepicker/examples#adapter
https://ng-bootstrap.github.io/#/components/datepicker/overview#date-model

W przykładzie używają stringa ale bez większych problemów można przerobić na Date:

/**
 * This Service handles how the date is represented in scripts i.e. ngModel.
 */
 @Injectable()
 export class CustomAdapter extends NgbDateAdapter<Date> {
 
   readonly DELIMITER = '-';
 
   fromModel(value: Date | null): NgbDateStruct | null {
     if (value && value instanceof Date) {
       return {
         day : value.getDate(),
         month : value.getMonth() + 1,
         year : value.getFullYear()
       };
     }
     return null;
   }
 
   toModel(date: NgbDateStruct | null): Date | null {
    //  return date ? date.day + this.DELIMITER + date.month + this.DELIMITER + date.year : null;
    return date ? new Date(`${date.year}/${date.month}/${date.day}`) : null;
   }
 }
 
/**
 * This Service handles how the date is rendered and parsed from keyboard i.e. in the bound input field.
 */
 @Injectable()
 export class CustomDateParserFormatter extends NgbDateParserFormatter {
 
   readonly DELIMITER = '/';
 
   parse(value: string): NgbDateStruct | null {
     if (value) {
       let date = value.split(this.DELIMITER);
       return {
         day : parseInt(date[0], 10),
         month : parseInt(date[1], 10),
         year : parseInt(date[2], 10)
       };
     }
     return null;
   }
 
   format(date: NgbDateStruct | null): string {
     return date ? date.day + this.DELIMITER + date.month + this.DELIMITER + date.year : '';
   }
 }

Trzeba też dodać do providerów (przy componencie albo globalnie):

@Component({
  selector: 'app-rejestr-uzytkownikow',
  templateUrl: './rejestr-uzytkownikow.component.html',
  styleUrls: ['./rejestr-uzytkownikow.component.scss'],
  host: { 'class': 'mb-auto' },
  providers: [
    {provide: NgbDateAdapter, useClass: CustomAdapter},
    {provide: NgbDateParserFormatter, useClass: CustomDateParserFormatter}
  ]
})
export class RejestrUzytkownikowComponent extends BaseComponent implements OnInit { }

Po takiej operacji ładnie się binduje poprzez [(ngModel)] do zmiennej typu Date.