HTML结合JS获取所选日期前一天时getDate报错解决方法

• 传入new Date()的参数错误：document.getElementById("date")返回的是页面DOM元素对象，不是用户选择的日期值，直接传入会生成无效的Date实例，调用getDate()就会报错。正确做法是取输入框元素的value属性值作为Date构造参数。
• document.write()用法错误：该方法执行时会直接覆盖整个页面的现有内容，且没有符合预期的返回值，不能用来给日期变量赋值。
• 日期赋值格式错误：type="date"的输入框仅接受YYYY-MM-DD格式的字符串作为value，直接传入Date对象会被转为非标准的时间字符串，无法正常显示。

HTML部分 #

<form>
  <div class="input-field">
    <label>Choose Date</label>
    <input type="date" id="date" onchange="myDate();" required>
  </div>
  <div class="input-fields">
    <label>Previous Date</label>
    <input type="date" id="previous" readonly>
  </div>
</form>

JavaScript部分 #

function myDate() {
  // 获取用户选中的日期字符串
  const selectedDate = document.getElementById("date").value;
  const dateObj = new Date(selectedDate);

  // 校验日期有效性
  if (isNaN(dateObj.getTime())) {
    console.log("无效日期");
    return;
  }

  // 计算前一天，自动处理跨月、跨年的情况
  dateObj.setDate(dateObj.getDate() - 1);

  // 格式化为date输入框要求的YYYY-MM-DD格式，月、日不足两位补前导0
  const formatDate = `${dateObj.getFullYear()}-${String(dateObj.getMonth() + 1).padStart(2, '0')}-${String(dateObj.getDate()).padStart(2, '0')}`;

  // 赋值给前一天输入框
  document.getElementById("previous").value = formatDate;
}

• 原代码里判断Date对象是否有效的逻辑有缺陷：无效Date对象本身也存在getDate方法，只是调用后返回NaN，用isNaN(date.getTime())判断有效性更准确。
• 用setDate(getDate()-1)的方式计算前一天是原生JS的正确写法，会自动处理月末、年末、闰年的日期跳转，不需要额外写判断逻辑。

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