返程日期不能早于出发日期，需先选出发日期才能启用返程选择：出发日期变化时动态设置返程min属性并启用输入框，若已填返程日期早于新出发日则清空。
实现往返日期联动限制，核心是让“返程日期”不能早于“出发日期”，且通常要求用户先选出发日期才能启用返程选择。下面用原生 HTML + JavaScript 实现简洁可靠的方案。
基础表单结构（含日期输入控件）
使用两个 type="date" 输入框，并为它们设置明确的 id 和初始状态：
返程输入框默认 disabled，避免用户误操作或绕过逻辑。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
出发日期变化时自动启用并限制返程日期
监听出发日期的 change 事件，动态设置返程日期的 min 属性，并移除禁用状态：
<script>
const depDate = document.getElementById('depDate');
const retDate = document.getElementById('retDate');
depDate.addEventListener('change', function() {
if (this.value) {
retDate.min = this.value; // 返程最早 = 出发当天
retDate.disabled = false;
// 可选：若返程已填但早于新出发日，清空它
if (retDate.value && retDate.value < this.value) {
retDate.value = '';
}
} else {
retDate.disabled = true;
retDate.value = '';
}
});
</script>
增强体验的小细节
-
默认设今天为最小可选出发日：给
depDate加上min="{{today}}"（服务端渲染）或用 JS 设置：depDate.min = new Date().toISOString().split('T')[0]; -
防止手动修改 HTML 绕过限制：提交前在 JS 中二次校验：
if (retDate.value -
移动端兼容性注意：iOS Safari 对
min支持良好，但部分旧 Android 浏览器可能忽略；建议保留 JS 校验兜底
可选：支持“去程/返程”切换逻辑（如点击“往返”单选后才激活返程）
若表单含“单程/往返”选项，可扩展如下：
<label><input type="radio" name="tripType" value="oneway"> 单程</label>
<label><input type="radio" name="tripType" value="round" checked> 往返</label>
<script>
document.querySelectorAll('input[name="tripType"]').forEach(radio => {
radio.addEventListener('change', () => {
retDate.disabled = radio.value === 'oneway';
});
});
</script>
再结合前面的日期联动逻辑，就能做到：选往返 → 启用返程 → 限制最小日期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
