Angular 12中MatDatePicker日期范围选择器无法正常编辑选中值问题

问题排查与解决步骤 #

1970-01-01是Unix时间戳为0时的默认日期，出现这个表现的核心原因是你修改其中一个日期时，另一个日期的绑定值被置为了非法值/空值，解析后就显示为这个默认日期，可按照以下顺序排查：

• 首先检查双向绑定的对象结构：绑定给日期范围选择器的起止日期应该是对象的两个独立字段，初始化时要确保两个字段都被正确声明，不要只初始化其中一个。比如TS中定义范围变量为range = { start: null, end: null }，模板中分别绑定[(ngModel)]="range.start"和[(ngModel)]="range.end"即可，不要把起止日期绑定到两个完全独立的变量上，避免触发范围选择器的内部校验异常。
• 其次检查自定义的日期变更监听逻辑：如果你额外加了dateChange、dateInput等事件的处理函数，确认修改单个日期时，没有直接给整个范围变量重新赋值导致另一个字段丢失。比如修改开始日期时只赋值this.range.start = 新日期值，不要直接写this.range = {start: 新日期值}，这种写法会清空end字段导致解析异常。
• 最后检查日期解析配置：确认你项目中配置的MAT_DATE_FORMATS日期格式和输入的日期格式匹配，如果格式不匹配会导致日期解析失败返回非法值，也会触发这个默认日期的问题。你可以在日期变更事件中打印两个日期的值，确认是否出现Invalid Date的返回，即可快速定位是否是解析配置的问题。

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