Angular中接收HTML date输入时应使用何种数据类型？

HTML的type="date"输入框通过NgForm返回的是ISO 8601格式的字符串（例如"2024-05-20"），所以你需要把number类型替换成string。不过直接用字符串做减法运算会得到NaN，因此还需要把字符串转换成Date对象来计算日期差。

修改后的TypeScript代码： #

export class PlansComponent {
  @ViewChild('datesForm') form: NgForm; // 修正模板引用变量名，与HTML保持一致

  checkDates(planDates: { firstDate: string, lastDate: string }) {
    // 将日期字符串转为Date对象
    const firstDate = new Date(planDates.firstDate);
    const lastDate = new Date(planDates.lastDate);

    // 计算两个日期的天数差（毫秒差转换为天数）
    const dayDiff = (lastDate.getTime() - firstDate.getTime()) / (1000 * 60 * 60 * 24);

    if (dayDiff <= 7) {
      confirm("Dates are OK");
    } else {
      alert("Only weekly dates");
    }
  }
}

关键说明： #

• 类型替换：将参数类型{ firstDate: number, lastDate: number }改为{ firstDate: string, lastDate: string }，匹配输入框返回的实际值类型。
• 日期计算：必须把字符串转为Date对象，通过getTime()获取毫秒数后计算差值，再转换为天数，才能正确判断日期间隔。
• 细节修正：原代码中@ViewChild的参数是'plansForm'，但HTML里表单的模板引用变量是#datesForm，二者需保持一致，否则无法正确获取表单实例。

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