日期更新错误答案

【问题标题】：Date update wrong日期更新错误
【发布时间】：2021-01-18 07:14:07
【问题描述】：

我有一个日期输入，我需要选择一个日期。当我从日历中选择时，我输入了正确的日期。假设使用键输入将此日期 (31/07/2001) 修改为格式不正确的日期 (31/14/2007)。我点击页面，日期更新为（02/03/2008）。这不是正确的行为，因为我希望当用户输入不正确的格式日期时，它不会更新输入类型日期，但错误的输入没有被修改。我在堆栈闪电战中重现了我的问题。

PROJECT

谁能帮帮我？

【问题讨论】：

有various validators可以使用。你可以试试[matDatepickerFilter]，防止用户打错日期
不，[matDatepickerFilter]会在解析日期后触发（来自本次stackblitz中的date.adapter.ts）
请在问题本身中包含所有相关代码（minimal reproducible example），而不仅仅是在外部网站上。

标签： angular typescript angular-material angular9

【解决方案1】：

在解析日期时您正在使用此代码：

if ((typeof value === 'string') && (value.indexOf('/') > -1)) {
          const str = value.split('/');
          const year = Number(str[2]);
          const month = Number(str[1]) - 1;
          const date = Number(str[0]);
          return new Date(year, month, date);
}

你得到这个日期：2008-03-01T23:00:00.000Z

然后你用这个代码格式化日期：

let day = date.getDate();
let month = date.getMonth() + 1;
let year = date.getFullYear();
return   this._to2digit(day)+ '-' + this._to2digit(month) + '-'+year;

并得到：02-03-2008

首先，我建议避免添加“-”而不是“/”，您可以稍后在您的组件或您的 api 服务上进行此转换。

为了解析日期，我会简单地尝试：

if ((typeof value === 'string')) {
    return new Date(value);
}

这将为无效日期返回 null，因此我猜该表单将无效。然后只需检查组件上的表单有效性；）

【讨论】：