小编Jon*_* S.的帖子

我正在尝试将格式为“ 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。任何帮助表示感谢，谢谢！

<div class="form-group">From:
    <div class="input-group">
        <input class="form-control"
               name="dp1" 
               [ngModel]="selectedStartDate"
               (ngModelChange)="selectStartDate($event)" 
               ngbDatepicker 
               [dayTemplate]="customDay" 
               [markDisabled]="isDisabled" 
               #d1="ngbDatepicker" />
        <div class="input-group-addon" (click)="d1.toggle()">
            <img src="img/calendar-icon.svg" style="width: 1.2rem; height:    1rem; cursor: pointer;" />
        </div>
    </div>
</div>

更新：虽然下面的解决方案有效，但由于某种原因，我无法设置默认日期值。例如，从日期选择器所在的组件中，我正在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: () => …