angular2 ngbdatepicker как формат даты в InputField

Question

Я использую самозагрузки implemenatation для angular2'

ng-bootstrap.github.io

Я хочет формат отображения даты в поле ввода, который является моделью. я посмотрел на API не нашел ни одного примера другого тогда NgbDateParserFormatter без explaning много :(

в angular1 это было так же просто, как добавление формата атрибут = «MM/DD/YYYY». Может ли один помочь?

Answer 1

Я создал этот вопрос и нашел ответ на следующую ссылку

https://github.com/ng-bootstrap/ng-bootstrap/issues/1056

Answer 2

«по умолчанию DatePicker поставляется с базовой реализацией этого Инты rface, который просто принимает даты в формате ISO. Если вы хотите обрабатывать другой формат (или несколько форматов) вы можете предоставить свою собственной реализацию NgbDateParserFormatter и зарегистрировать его в качестве поставщика в модуле.»Source

https://gist.github.com/nrobinaubertin/61ff1c3db355c74f4e56f485b566ab22 и здесь вы найдете пример . реализация

скопированный код из источника:

app.component.ts

import { NgbDatepickerConfig, NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap'; 
import { NgbDateFRParserFormatter } from "./ngb-date-fr-parser-formatter" 

@Component({ 
    providers: [{provide: NgbDateParserFormatter, useClass: NgbDateFRParserFormatter}] 
}) 
export class AppComponent {} 

NGB-дата-FR-парсер-formatter.ts

import { Injectable } from "@angular/core"; 
import { NgbDateParserFormatter, NgbDateStruct } from "@ng-bootstrap/ng-bootstrap"; 

function padNumber(value: number) { 
    if (isNumber(value)) { 
     return `0${value}`.slice(-2); 
    } else { 
     return ""; 
    } 
} 

function isNumber(value: any): boolean { 
    return !isNaN(toInteger(value)); 
} 

function toInteger(value: any): number { 
    return parseInt(`${value}`, 10); 
} 


@Injectable() 
export class NgbDateFRParserFormatter extends NgbDateParserFormatter { 
    parse(value: string): NgbDateStruct { 
     if (value) { 
      const dateParts = value.trim().split('/'); 
      if (dateParts.length === 1 && isNumber(dateParts[0])) { 
       return {year: toInteger(dateParts[0]), month: null, day: null}; 
      } else if (dateParts.length === 2 && isNumber(dateParts[0]) && isNumber(dateParts[1])) { 
       return {year: toInteger(dateParts[1]), month: toInteger(dateParts[0]), day: null}; 
      } else if (dateParts.length === 3 && isNumber(dateParts[0]) && isNumber(dateParts[1]) && isNumber(dateParts[2])) { 
       return {year: toInteger(dateParts[2]), month: toInteger(dateParts[1]), day: toInteger(dateParts[0])}; 
      } 
     } 
     return null; 
    } 

    format(date: NgbDateStruct): string { 
     let stringDate: string = ""; 
     if(date) { 
      stringDate += isNumber(date.day) ? padNumber(date.day) + "/" : ""; 
      stringDate += isNumber(date.month) ? padNumber(date.month) + "/" : ""; 
      stringDate += date.year; 
     } 
     return stringDate; 
    } 
}