使用jQuery比较日期输入框值并控制按钮禁用状态，结合Cookie处理表单

看起来你已经搭好了基础的表单和Cookie存储框架，我来帮你完善日期比较逻辑和按钮启用的功能，同时补全整个交互流程的代码。

完整HTML结构 #

先补全你未写完的HTML内容，添加上提交按钮和切换按钮：

<!-- 日期输入表单（初始状态根据Cookie决定显示/隐藏） -->
<form id="datesinput" style="display: none;">
  <h3>Select dates:</h3>
  <label>Check in</label>
  <input type="date" id="checkindate" name="checkindate" value="" required/>
  <label>Check out:</label>
  <input type="date" id="checkoutdate" name="checkoutdate" value="" required/>
  <button type="submit" id="submitDates" disabled>Submit Dates</button>
</form>

<!-- 修改日期按钮（初始隐藏） -->
<button id="changeDatesBtn" style="display: none;">设置其他日期</button>

完整jQuery实现 #

下面是包含日期比较、Cookie操作和显示切换的完整代码，每部分都做了注释说明：

$(document).ready(function() {
  // 工具函数：设置Cookie
  function setCookie(name, value, days) {
    let expires = "";
    if (days) {
      const date = new Date();
      date.setTime(date.getTime() + (days*24*60*60*1000));
      expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
  }

  // 工具函数：获取Cookie
  function getCookie(name) {
    const nameEQ = name + "=";
    const ca = document.cookie.split(';');
    for(let i=0;i < ca.length;i++) {
      let c = ca[i];
      while (c.charAt(0)==' ') c = c.substring(1,c.length);
      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
  }

  // 页面加载时自动判断显示表单还是修改按钮
  const savedCheckin = getCookie("checkindate");
  const savedCheckout = getCookie("checkoutdate");
  if (savedCheckin && savedCheckout) {
    $("#datesinput").hide();
    $("#changeDatesBtn").show();
    // 可选：在控制台打印已保存的日期
    console.log(`已保存入住日期：${savedCheckin}，退房日期：${savedCheckout}`);
  } else {
    $("#datesinput").show();
    $("#changeDatesBtn").hide();
  }

  // 监听日期输入框变化，实时比较日期并更新按钮状态
  $("#checkindate, #checkoutdate").on("change", function() {
    const checkinDate = new Date($("#checkindate").val());
    const checkoutDate = new Date($("#checkoutdate").val());
    
    // 验证两个日期都有效，且退房日期晚于入住日期
    if (checkinDate instanceof Date && !isNaN(checkinDate) && 
        checkoutDate instanceof Date && !isNaN(checkoutDate) && 
        checkoutDate > checkinDate) {
      $("#submitDates").prop("disabled", false);
    } else {
      $("#submitDates").prop("disabled", true);
    }
  });

  // 提交表单时保存日期到Cookie，切换显示状态
  $("#datesinput").on("submit", function(e) {
    e.preventDefault();
    const checkinVal = $("#checkindate").val();
    const checkoutVal = $("#checkoutdate").val();
    
    // 保存Cookie，有效期设为7天（可按需调整）
    setCookie("checkindate", checkinVal, 7);
    setCookie("checkoutdate", checkoutVal, 7);
    
    // 切换显示：隐藏表单，显示修改按钮
    $("#datesinput").hide();
    $("#changeDatesBtn").show();
    alert("日期已成功保存！");
  });

  // 点击修改按钮，回到日期输入表单
  $("#changeDatesBtn").on("click", function() {
    $("#datesinput").show();
    $("#changeDatesBtn").hide();
    // 可选：清空输入框或保留之前的日期
    // $("#checkindate").val("");
    // $("#checkoutdate").val("");
    $("#submitDates").prop("disabled", true);
  });
});

核心功能说明 #

• 日期比较逻辑：每次日期输入框的值变化时，将字符串转为Date对象，验证有效性的同时判断退房日期是否晚于入住日期，满足条件则自动启用提交按钮。
• Cookie状态判断：页面加载时读取Cookie，自动决定显示日期表单还是修改按钮，实现记忆用户选择的效果。
• 交互流程优化：提交后自动切换显示状态，点击修改按钮可重新进入日期选择，全程保持按钮状态的合理性。

注意点 #

• 必须验证日期的有效性（instanceof Date && !isNaN(date)），避免用户输入无效值导致的逻辑错误。
• Cookie的有效期可以根据业务需求调整，代码中默认设为7天。
• 如果需要在表单提交后执行其他操作（比如发送AJAX请求），可以在表单提交的事件处理函数中添加对应代码。

内容的提问来源于stack exchange，提问作者арно нюм