指定的值不符合要求的格式，“yyyy-MM-dd”

Question

我已经在我的学校项目中实施了这个解决方案

然而，每当我尝试更改初始日期字段的值时，我都会从控制台收到此错误

指定的值“2/21/2023”不符合要求的格式，“yyyy-MM-dd”。

解决方案在给出的示例中可能有什么问题

我试过改变

dueDateInput.value = dueDate.toLocaleDateString('en-CA');

进入

dueDateInput.value = dueDate.toISOString();

还有

dueDateInput.value = dueDate.toLocaleDateString('bo-CN');

但无济于事

由于浏览器说这是给出错误的代码行，我如何将 dueDate 转换为 YYYY-MM-DD 以便我可以将其作为值分配给其他日期字段

Answer 1

您可以避免使用日期字符串，只需设置 valueAsDate 属性即可。

这允许您直接使用

Date

实例，这使得日期算术更容易。

const dateCreatedInput = document.getElementById("date-created");
const addMonthsInput = document.getElementById("add-months");
const dueDateInput = document.getElementById("due-date");

const setDueDate = () => {
  const dateCreated = dateCreatedInput.valueAsDate;
  if (dateCreated) {
    dateCreated.setMonth(dateCreated.getMonth() + addMonthsInput.valueAsNumber);
    dueDateInput.valueAsDate = dateCreated;
  }
};

dateCreatedInput.addEventListener("change", setDueDate);
addMonthsInput.addEventListener("change", setDueDate);

<p>
<label for="date-created">Date created:</label>
<input type="date" id="date-created"/>
</p>
<p>
<label for="add-months">Add months:</label>
<input type="number" id="add-months" min="1" value="1"/>
</p>
<p>
<label for="due-date">Due date:</label>
<input type="date" id="due-date" readonly/>
</p>

Answer 2

.toISOString()

的问题是它返回一个完整的日期and 时间戳，而你想要的只是日期部分。您可以使用

date.getFullYear()

、

date.getMonth()

和

date.getDate()}

来获取完整的日期。这是一个例子：

const dateInput = document.getElementById('date');

const date = new Date(); // by default, today's date
dateInput.value = `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2, '0')}-${date.getDate()}`;

<input type="date" id="date">