我试图将格式化为“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 解析/格式化方法，因为我将日期数据作为“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 和表单，我将“selectedStartDate”绑定字段设置为 NgbDateStruct 类型的日期。然后，在调试模式下，我可以看到我的 selectedStartDate 字段被填充，最终 MyNgbDateParserFormatter.format() 被调用以将日期格式化为“longDate”字符串 - 但是 format() 方法中的日期参数为 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<string>;
@Output() endDateChanged: EventEmitter<string>;
constructor(private dateFilterService: DateFilterService) {
this.startDateChanged = new EventEmitter<string>();
this.endDateChanged = new EventEmitter<string>();
}
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);
}
}
感谢您提前提供的任何帮助，谢谢。
