如何将input date类型值转换为YYYY/MM/DD格式并做提交前验证？

问题分析 #

原代码存在几个关键问题：

• convertDateToYYYYMMDD函数逻辑混乱：既接收Date对象又接收字符串，却直接调用toISOString()（字符串无此方法），且最终返回的是formattedDate而非自己拼接的目标格式日期
• 未对用户手动输入的日期字符串做合法性校验，直接尝试转换会导致报错
• 目标格式要求是YYYY/MM/DD，但原代码拼接的是YYYY-MM-DD

修正后的代码实现 #

// 统一处理日期转换：支持传入Date对象或合法日期字符串，返回YYYY/MM/DD格式
function convertDateToYYYYMMDD(dateInput) {
    let date;
    // 区分输入是Date对象还是字符串
    if (dateInput instanceof Date) {
        date = dateInput;
    } else {
        // 先尝试解析字符串，若解析失败则返回null
        date = new Date(dateInput);
        if (isNaN(date.getTime())) {
            return null;
        }
    }
    const year = date.getFullYear();
    // 月份从0开始，需+1，不足两位补0
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}/${month}/${day}`;
}

// 验证日期是否为过去日期（不含今天）
function isPastDate(dateStr) {
    const targetDate = new Date(dateStr);
    const today = new Date();
    // 重置今天的时分秒为0，避免当天时间影响判断
    today.setHours(0, 0, 0, 0);
    return targetDate < today;
}

const formContainer = $('form');
formContainer.on('change', 'input[name="start_date"], input[name="end_date"]', function() {
    const startInput = formContainer.find('input[name="start_date"]');
    const endInput = formContainer.find('input[name="end_date"]');
    
    const startVal = startInput.val().trim();
    // 转换并验证开始日期
    const formattedStartDate = convertDateToYYYYMMDD(startVal);
    if (!formattedStartDate) {
        alert('开始日期格式错误，请按YYYY/MM/DD或YYYY-MM-DD格式输入');
        startInput.focus();
        return;
    }
    
    // 检查是否为过去日期
    if (isPastDate(formattedStartDate)) {
        alert('开始日期不能是过去日期');
        startInput.focus();
        return;
    }
    
    // 同理处理结束日期（可选）
    const endVal = endInput.val().trim();
    const formattedEndDate = convertDateToYYYYMMDD(endVal);
    if (formattedEndDate) {
        if (isPastDate(formattedEndDate)) {
            alert('结束日期不能是过去日期');
            endInput.focus();
        }
    }
    
    alert(`转换后的开始日期：${formattedStartDate}`);
});

关键说明 #

• 日期转换函数兼容两种输入类型：Date对象和合法日期字符串，解析失败返回null用于格式校验
• 使用padStart(2, '0')简化补零逻辑，比原代码的长度判断更简洁
• 新增过去日期校验函数，通过重置当天时分秒避免时间差导致的误判
• 先做格式校验，再做业务逻辑检查，出错时提示并聚焦到对应输入框

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