Angular 中 Mat 日期范围选择器显示值错误，期望起始值为2021-02-01T00:00:00.000Z

显示值不符合预期的根因 #

很多人直接把2021-02-01T00:00:00.000Z这类UTC格式的字符串直接绑给组件，Angular Material默认的日期适配器会按照浏览器所在的本地时区解析时间，十有八九会出现日期偏移——比如你在国内东八区的环境下，本来想设置2月1日作为起始值，结果组件显示成1月31日，和预期完全对不上。

具体操作步骤：

• 正确构造初始值
  别直接把ISO字符串扔给FormControl，先把目标时间转成标准Date实例再赋值。初始化表单的时候可以这么写：

  // 严格对应要求的起始值：2021-02-01T00:00:00.000Z
  const startDate = new Date('2021-02-01T00:00:00.000Z');
  // 结束值可以按需求设置
  const endDate = new Date();
  // 严格按照Mat日期范围选择器要求的嵌套表单结构初始化
  dateRangeForm = new FormGroup({
    range: new FormGroup({
      start: new FormControl<Date | null>(startDate),
      end: new FormControl<Date | null>(endDate),
    })
  });
  

• 解决时区偏移导致的显示异常
  完成赋值后如果还是显示不对，按项目需求二选一调整即可：
  1. 全局适配UTC解析逻辑
     在根模块的providers里替换默认的DateAdapter，让组件统一用UTC规则解析、格式化日期，不管用户用什么时区的浏览器，解析传入的UTC时间时都不会做本地时区偏移计算，从根源上解决日期算错的问题。
  2. 局部调整显示规则
     如果不想改动全局配置，可以在模板层调整日期的格式化逻辑，让组件读取日期时取UTC维度的年月日，而不是本地时区转换后的数值，同样能实现正确显示。
• 检查模板绑定正确性
  很多人绑值不生效，是因为把整个范围的ISO字符串直接绑给了外层的range控件，忘了Mat日期范围选择器要求start、end两个值必须是嵌套FormGroup下的独立控件，参考正确的模板写法：

  <mat-date-range-input [rangePicker]="picker">
    <input matStartDate formControlName="start" placeholder="起始日期">
    <input matEndDate formControlName="end" placeholder="结束日期">
  </mat-date-range-input>
  <mat-date-range-picker #picker></mat-date-range-picker>
  

踩坑提醒：别用本地时区的日期构造方式设初始值，比如new Date(2021, 1, 1)生成的是东八区本地时间的2月1日，对应的UTC时间是2021-01-31T16:00:00.000Z，和你要求的起始值根本对不上。

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