如何将API返回的日期字符串赋值给type为date的input输入框

首先明确：type="date"的输入框要求value必须是YYYY-MM-DD格式的字符串，月份和日期不足两位时必须补前导零，否则赋值会失效。

1 格式化原始日期字符串 #

你拿到的"2020-1-1"格式不符合要求，需要先对单数字的月份、日期补零，示例代码如下：

let str = "2020-1-1";
// 拆分出年月日并转数字
const [year, month, day] = str.split('-').map(Number);
// 补零后拼接为标准格式
const formattedDate = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
// 处理后formattedDate的值为 "2020-01-01"，可直接赋值

2 赋值给输入框 #

原生JavaScript操作示例 #

const dateInput = document.querySelector('input[type="date"]');
dateInput.value = formattedDate;

框架绑定示例（以React为例） #

直接将格式化后的值绑定到value属性即可：

<input type="date" value={formattedDate} />

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