如何为input type date设置默认值为当月最后一天

要实现这个需求，你可以通过JavaScript计算出当月的最后一天，再将格式化后的日期赋值给input元素的value属性，具体实现如下：

核心思路 #

利用JavaScript的Date对象特性：当传入的日期参数为0时，会自动返回上个月的最后一天。基于这个特性，我们可以直接得到当月的最后一天，再将其格式化为input type="date"要求的YYYY-MM-DD格式即可。

完整代码示例 #

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

<script>
// 获取当月最后一天的日期对象
function getLastDayOfMonth() {
  const now = new Date();
  // 传入下一个月的第0天，等价于当月最后一天
  return new Date(now.getFullYear(), now.getMonth() + 1, 0);
}

// 将日期对象格式化为YYYY-MM-DD字符串
function formatDate(date) {
  const year = date.getFullYear();
  // 月份和日期需补零为两位数字
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}

// 页面加载完成后设置默认值
document.addEventListener('DOMContentLoaded', () => {
  const picker = document.getElementById('datePicker');
  picker.value = formatDate(getLastDayOfMonth());
});
</script>

代码说明 #

• getLastDayOfMonth()：通过new Date(year, month+1, 0)直接获取当月最后一天的日期对象，无需手动计算当月天数
• formatDate()：处理月份和日期的补零逻辑，确保输出格式符合input type="date"的要求
• DOMContentLoaded事件：保证DOM元素加载完成后再执行赋值操作，避免出现元素未找到的错误

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