如何使用jQuery或JavaScript设置date类型input输入框的value值

报错原因 #

HTML5 原生 date 类型输入框的 value 仅支持 yyyy-MM-dd 格式的字符串。你直接传入 Date 对象赋值时，jQuery 会自动将 Date 对象转为带时区、时分秒的 ISO 8601 格式字符串，和输入框要求的格式不匹配，因此抛出报错。

解决方案 #

只需要将 Date 对象手动格式化为 yyyy-MM-dd 格式的字符串再赋值即可，两种常用实现方式如下：

方式1：使用toLocaleDateString格式化 #

var date1 = new Date($("#date1").val() + "T00:00");
date1.setDate(date1.getDate() + 30);  // 计算30天后的日期

// 格式化日期为yyyy-MM-dd
const formattedDate = date1.toLocaleDateString('zh-CN', {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit'
}).replaceAll('/', '-');

const $date2 = $("#date2");  // date类型的输入框
$date2.val(formattedDate);

方式2：手动拼接日期（兼容性更好） #

如果需要兼容低版本浏览器，可以手动拼接日期字符串，注意月份需要+1、不足两位补前导零：

var date1 = new Date($("#date1").val() + "T00:00");
date1.setDate(date1.getDate() + 30);  // 计算30天后的日期

const year = date1.getFullYear();
const month = String(date1.getMonth() + 1).padStart(2, '0');
const day = String(date1.getDate()).padStart(2, '0');
const formattedDate = `${year}-${month}-${day}`;

const $date2 = $("#date2");  // date类型的输入框
$date2.val(formattedDate);

内容的提问来源于stack exchange，提问作者Stephen H. Anderson