NgbDatePicker-如何将longDate字符串绑定到[ngModel]？

我正在尝试将格式为“ longDate”字符串的日期绑定到ngbDatePicker中的[ngModel]输入值。例如，当用户选择一个日期时，我想显示“ 2017年1月15日”，而不是“ 2017-01-15”。

我了解[ngModel]仅绑定到NgbDateStruct类型的对象，并且在我看来，当我将NgbDateStruct类型的对象（如下面的代码所示，将其称为selectedStartDate）传递给[ngModel]时，则将NgbDateParserFormatter.format（selectedStartDate ）在后台被调用，以将日期显示为“ yyyy-MM-dd”。那么如何将longDate格式（即2017年1月15日）绑定到[ngModel]？我曾考虑过重写NgbDateParserFormatter中的format（）方法以根据需要显示日期，但是我不确定在传递NgbDateStruct对象以绑定到[ngModel]时如何调用/是否调用它。

另外，最好保留NgbDateStruct解析/格式化方法，因为我将Date数据作为“ yyyy-MM-dd”字符串传递给API，并且它们派上用场了。.我正在使用ngbootstrap alpha.18。任何帮助表示感谢，谢谢！

From:
    

        
        

            
        
    

更新：虽然下面的解决方案有效，但由于某种原因，我无法设置默认日期值。例如，从日期选择器所在的组件中，我正在ngOnInit（）中实现OnInit和form，我将“ selectedStartDate”绑定字段设置为NgbDateStruct类型的日期。然后，在调试模式下，我可以看到我的selectedStartDate字段被填充，最终MyNgbDateParserFormatter.format（）被调用以将日期格式化为“ longDate”字符串-但是format（）方法中的date参数为null并且当然会引发错误……我不知道为什么它会以null到达那里。之后，当我选择一个日期时，“ selectedDate”将以预期的“ longDate”格式显示。

我注意到的下一个问题是，现在每次选择日期时，都不会触发selectStartDate（）方法。

这是我的模块（我在“共享模块”中提供此模块，因为这是我声明使用ngbdatepicker的组件的位置）

    @NgModule({
    imports: [
        CommonModule,
        FormsModule,
        NgbModule,
        ChartsModule
    ],
    exports: [
        CommonModule,
        FormsModule,
        NgbModule,
        CrgbFilterComponent,
        DateFilterComponent,
        BarChartComponent,
        LineChartComponent,
        ChartsModule
    ],
    declarations: [
        CrgbFilterComponent,
        DateFilterComponent,
        BarChartComponent,
        LineChartComponent
    ],
    providers: [
        {
            provide: NgbDateParserFormatter,
            useFactory: () => { return new CustomNgbDateParserFormatter("longDate") }
        },
        DateFilterService,
        BarChartService,
        TableService,
        HelperMethodsService
    ]
})
export class SharedModule { }

这是我的组件（重要的部分）：

    export class DateFilterComponent implements OnInit {

 selectedStartDate: NgbDateStruct;
 selectedEndDate: NgbDateStruct;
 @Output() startDateChanged: EventEmitter;
 @Output() endDateChanged: EventEmitter;

    constructor(private dateFilterService: DateFilterService) {
        this.startDateChanged = new EventEmitter();
        this.endDateChanged = new EventEmitter();
    }

 ngOnInit(): void {
        this.selectStartDate(this.dateFilterService.setDefaultStartDate());
        this.selectEndDate(this.dateFilterService.setDefaultEndDate());
    }

 selectStartDate(date: NgbDateStruct) {
        if (date != null) {
            this.selectedStartDate = date;
            let dateString = this.dateFilterService.toServerString(date);;
            this.startDateChanged.emit(dateString);
        }
    }

 selectEndDate(date: NgbDateStruct) {
        if (date != null) {
            this.selectedEndDate = date;
            let dateString = this.dateFilterService.toServerString(date);
            this.endDateChanged.emit(dateString);
        }
    }

这是我的日期过滤服务：

    export class DateFilterService {

    constructor(private parserFormatter: NgbDateParserFormatter) { }

    setDefaultStartDate(): NgbDateStruct {
        // removing for simplicity, returning a NgbDateStruct object correctly.
    }

    setDefaultEndDate(): NgbDateStruct {
        // removing for simplicity, returning a NgbDateStruct object correctly.
    }

    toNgbDateStruct(date: string): NgbDateStruct {
        return this.parserFormatter.parse(date);
    }

    tolongDateString(date: NgbDateStruct): string {
        return this.parserFormatter.format(date);
    }

    toServerString(date: NgbDateStruct): string {
        return this.parserFormatter.formatForServer(date);
    }
}

预先感谢您的任何帮助，谢谢。