如何使用Angular正确绑定HTML date-local输入框的默认值？

• 输入框类型错误：原生HTML不存在date-local类型，需同时选日期时间用datetime-local，仅选日期用date
• 属性拼写错误：valeu为笔误，正确属性名是value
• 日期格式化逻辑错误：
  • 库名momento应为moment，常量声明Const需小写为const
  • 必须先调用moment()生成实例，才能调用后续的.format()方法
  • moment的四位公历年占位符是大写YYYY，小写yyyy无法匹配正确年份
  • 原生日期类输入框对value格式有强制要求：date类型需YYYY-MM-DD格式，datetime-local类型需YYYY-MM-DDTHH:mm格式，格式不符会导致值无法回显
• 绑定语法错误：{{today}}是框架/模板引擎的语法，原生HTML不会自动解析，若使用框架需确保变量已在当前作用域注册

1. 定义符合格式要求的默认值

// 仅日期场景
const today = moment().format("YYYY-MM-DD")
// 日期+时间联动场景
const todayWithTime = moment().format("YYYY-MM-DDTHH:mm")

2. 按使用场景绑定输入框

• Vue这类支持模板语法的框架写法：

<!-- 仅日期 -->
<input type="date" :value="today" />
<!-- 日期时间联动 -->
<input type="datetime-local" :value="todayWithTime" />

• 原生JS场景写法：

// 给仅日期输入框赋值
document.querySelector('input[type="date"]').value = today
// 给日期时间输入框赋值
document.querySelector('input[type="datetime-local"]').value = todayWithTime

注意：如果直接在HTML属性中写{{today}}模板语法，未引入对应框架/模板引擎的情况下，该语法会被当做普通字符串传递，无法实现绑定效果。

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