如何将表示日期时间的数字数组绑定到datetime-local类型输入框？

这里提供两种简洁实现方案，都不需要额外做大量格式转换处理：

方案1：模板直接绑定（零组件逻辑改动） #

直接在模板里拆分双向绑定，不需要修改原有组件的startTime属性定义，所有转换逻辑都在模板内完成：

<input 
  type="datetime-local" 
  [ngModel]="startTime ? `${startTime[0]}-${startTime[1].toString().padStart(2,'0')}-${startTime[2].toString().padStart(2,'0')}T${startTime[3].toString().padStart(2,'0')}:${startTime[4].toString().padStart(2,'0')}` : ''"
  (ngModelChange)="startTime = [new Date($event).getFullYear(), new Date($event).getMonth() + 1, new Date($event).getDate(), new Date($event).getHours(), new Date($event).getMinutes()]"
/>

优势 #

• 完全不需要修改组件内的原有逻辑，原有对startTime数组的操作全部兼容
• 不需要引入额外依赖，全部用原生API实现

方案2：访问器封装（逻辑更干净） #

如果不想模板里写太多逻辑，可以在组件内用getter/setter封装转换，对外暴露的接口完全不变：

组件代码修改 #

// 保留原有公有定义，底层换私有属性存储
private _startTime: number[];
public get startTime(): number[] {
  return this._startTime;
}
public set startTime(val: number[]) {
  this._startTime = val;
}

// 新增专供输入框绑定的访问器
get datetimeVal(): string {
  if (!this._startTime?.length) return '';
  const pad = (n: number) => n.toString().padStart(2, '0');
  const [y, m, d, h, min] = this._startTime;
  return `${y}-${pad(m)}-${pad(d)}T${pad(h)}:${pad(min)}`;
}
set datetimeVal(val: string) {
  const date = new Date(val);
  this._startTime = [
    date.getFullYear(),
    date.getMonth() + 1,
    date.getDate(),
    date.getHours(),
    date.getMinutes()
  ];
}

模板绑定 #

<input type="datetime-local" [(ngModel)]="datetimeVal" />

优势 #

• 模板逻辑干净，和普通双向绑定用法完全一致
• 转换逻辑封装在组件内，可复用性更高

注意：两种方案都默认你的startTime数组中月份是1~12的自然计数，不需要额外做月份偏移处理。

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