日期选择器默认值、提交异常及datetime-local年份格式问题修复需求

针对你提出的三个需求，以下是具体的修复步骤和代码：

问题分析 #

1. 提交异常原因：原代码可能在提交流程中重复执行了默认日期赋值逻辑，导致用户自定义日期被强制覆盖；同时原代码使用的MM/DD/YYYY格式不符合datetime-local控件的标准要求，引发解析异常。
2. 格式问题原因：datetime-local控件要求输入值为YYYY-MM-DDTHH:mm的ISO格式，原代码的自定义格式导致控件解析错误，出现年份显示为6位的异常。

修复后的代码 #

HTML部分 #

<label for="date-start">Start Date</label>
<!-- 指定为datetime-local类型，设置步长为一天以隐藏时间选择 -->
<input type="datetime-local" class="date-picker" id="date-start" step="86400">
<label for="date-end">End Date</label>
<input type="datetime-local" class="date-picker" id="date-end" step="86400">

• type="datetime-local"：启用浏览器原生日期控件，确保格式渲染正确
• step="86400"：设置步长为86400秒（1天），让控件仅展示日期选择功能

JavaScript部分 #

// 页面首次加载时设置默认值，仅执行一次
window.addEventListener('DOMContentLoaded', function() {
    const now = new Date();
    const yearNow = now.getFullYear();
    
    // 生成当年1月1日的标准格式日期
    const startDate = new Date(yearNow, 0, 1);
    document.getElementById('date-start').value = formatToISO(startDate);
    
    // 生成当前日期的标准格式日期
    document.getElementById('date-end').value = formatToISO(now);
});

// 辅助函数：将Date对象转为datetime-local要求的ISO格式
function formatToISO(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}T00:00`;
}

// 提交逻辑：直接获取用户输入值，不做强制覆盖
function handleSubmit(e) {
    e.preventDefault();
    const startVal = document.getElementById('date-start').value;
    const endVal = document.getElementById('date-end').value;
    // 此处执行实际提交操作，比如接口请求
    console.log('提交的开始日期:', startVal);
    console.log('提交的结束日期:', endVal);
}

关键修复说明 #

• 默认值触发时机：通过DOMContentLoaded事件限定默认值仅在页面初始化时设置，提交流程中不再执行赋值操作，避免覆盖用户自定义日期。
• 格式标准化：采用datetime-local控件要求的ISO格式赋值，彻底解决年份显示异常问题。
• 控件功能优化：利用原生日期控件的特性，避免自定义格式带来的兼容性和解析问题。

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