Angular Bootstrap Datepicker绑定失效 日期值无法在输入控件正常显示

问题根因 #

你使用的@ng-bootstrap/ng-bootstrap@10.x版本中，ngbDatepicker默认仅支持绑定NgbDateStruct类型的结构化对象（也就是你手动选日期时返回的{year: 2021, month: 8, day: 12}格式），不识别原生Date对象、ISO日期字符串、普通日期字符串，所以直接赋值会无法在输入框显示。

解决方案 #

方案1：使用内置日期适配器（推荐）

ng-bootstrap提供了原生Date对象的适配组件，全局配置后不需要改动现有业务绑定逻辑，就能直接绑定Date类型数据：

1. 在对应模块（AppModule或当前组件所属的功能模块）导入适配器：

import { NgbDateAdapter, NgbDateNativeAdapter } from '@ng-bootstrap/ng-bootstrap';

2. 在模块的providers数组中添加适配配置：

@NgModule({
  // 原有imports、declarations等配置保持不变
  providers: [
    { provide: NgbDateAdapter, useClass: NgbDateNativeAdapter }
  ]
})
export class AppModule { }

3. 接口返回数据后转成Date类型赋值即可：

// 示例：接口拿到日期字符串后处理
this.user.lastActivityDate = new Date('2020-10-21T09:39:04.357');

方案2：手动转换日期结构

不想要全局配置的话，可以单独把日期转成NgbDateStruct结构再绑定：

// 日期字符串转NgbDateStruct工具方法
const dateStrToStruct = (dateStr: string) => {
  const date = new Date(dateStr);
  return {
    year: date.getFullYear(),
    month: date.getMonth() + 1, // getMonth返回值为0-11，需要+1匹配组件的月份规则
    day: date.getDate()
  }
}

// 赋值时转换
this.user.lastActivityDate = dateStrToStruct('2020-10-21T09:39:04.357');

提交接口时再把拿到的结构对象反向转成需要的字符串格式即可。

自定义显示为「月/日/年」格式 #

如果要修改输入框默认的yyyy-mm-dd显示格式，可以自定义日期格式化器：

1. 新建自定义格式化器类：

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

@Injectable()
export class MdyDateFormatter extends NgbDateParserFormatter {
  // 结构化日期转显示字符串
  format(date: NgbDateStruct | null): string {
    return date ? `${date.month}/${date.day}/${date.year}` : '';
  }

  // 用户输入的字符串转结构化日期
  parse(value: string | null): NgbDateStruct | null {
    if (!value) return null;
    const [month, day, year] = value.split('/').map(Number);
    return { month, day, year };
  }
}

2. 在模块providers中添加配置即可生效：

providers: [
  { provide: NgbDateAdapter, useClass: NgbDateNativeAdapter },
  { provide: NgbDateParserFormatter, useClass: MdyDateFormatter }
]

内容的提问来源于stack exchange，提问作者Dennis