angular2 ngbdatepicker 如何格式化输入字段中的日期

Question

我正在使用 ng-bootstrap Datepicker。我想格式化显示在模型输入字段中的日期。我查看了 API，但没有找到 NgbDateParserFormatter 以外的任何示例不用多解释:(

在Angular1中，添加一个属性就这么简单format="MM/dd/yyyy"。有人可以帮忙吗？

Answer 1

我创建了一个 issue 并在那里得到了答案。

Answer 2

"By default the datepicker comes with the basic implementation of this interface that just accepts dates in the ISO format. If you want to handle a different format (or multiple formats) you can provide your own implementation of the NgbDateParserFormatter and register it as a provider in your module." Source

在 this GitHub gist 中，您可以找到示例实现。这是来自该来源的副本：

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-date-fr-parser-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;
    }
}

angular2 ngbdatepicker 如何格式化输入字段中的日期

angular2 ngbdatepicker how to format date in inputfield

ng-bootstrap

angular