适配Staah预订引擎的表单：选首日后禁用过去日期的日期选择器问题

我明白你现在的困境——要把表单日期转换成Staah要求的dd M yyyy格式再发GET请求，之前改的方案有问题对吧？我来给你捋个靠谱的实现思路：

• 第一步：处理日期格式转换
  首先要把用户选择的日期（通常input[type="date"]返回的是yyyy-MM-dd格式）转换成目标格式。这里用原生JavaScript的Date对象就能搞定，不用依赖第三方库：

  function formatDateForStaah(rawDate) {
    const date = new Date(rawDate);
    const day = String(date.getDate()).padStart(2, '0');
    // 注意JS的月份是从0开始计数的，所以要+1后匹配英文缩写
    const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    const month = monthNames[date.getMonth()];
    const year = date.getFullYear();
    return `${day} ${month} ${year}`;
  }
  

  这个函数能把2018-04-19完美转换成19 Apr 2018，完全符合Staah的格式要求。

• 第二步：拦截表单提交，修改GET参数
  别让表单直接提交，而是通过JS拦截提交事件，替换日期参数后再手动跳转，这样能精准控制参数格式：

  <form id="bookingForm" action="你的Staah预订引擎地址" method="GET">
    <input type="date" name="checkin" id="checkin">
    <input type="date" name="checkout" id="checkout">
    <!-- 其他表单字段可以保留在这里 -->
    <button type="submit">提交预订</button>
  </form>
  
  <script>
    const form = document.getElementById('bookingForm');
    form.addEventListener('submit', function(e) {
      e.preventDefault(); // 阻止表单默认提交行为
  
      // 获取并转换日期
      const checkinRaw = document.getElementById('checkin').value;
      const checkoutRaw = document.getElementById('checkout').value;
      const checkinFormatted = formatDateForStaah(checkinRaw);
      const checkoutFormatted = formatDateForStaah(checkoutRaw);
  
      // 构建完整的GET请求URL
      const baseUrl = this.action;
      const params = new URLSearchParams();
      // 保留表单里的其他参数（如果有的话）
      new FormData(this).forEach((value, key) => {
        if (key !== 'checkin' && key !== 'checkout') {
          params.append(key, value);
        }
      });
      // 添加转换后的日期参数
      params.append('checkin', checkinFormatted);
      params.append('checkout', checkoutFormatted);
  
      // 跳转到Staah预订引擎
      window.location.href = `${baseUrl}?${params.toString()}`;
    });
  
    // 日期转换函数
    function formatDateForStaah(rawDate) {
      const date = new Date(rawDate);
      const day = String(date.getDate()).padStart(2, '0');
      const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
      const month = monthNames[date.getMonth()];
      const year = date.getFullYear();
      return `${day} ${month} ${year}`;
    }
  </script>
  

• 第三步：处理边界情况，避免出错
  别忘了加基础的日期验证，防止用户输入无效值：

  // 在submit事件里添加这些判断
  if (!checkinRaw || !checkoutRaw) {
    alert('请选择入住和退房日期');
    return;
  }
  const checkinDate = new Date(checkinRaw);
  const checkoutDate = new Date(checkoutRaw);
  if (checkoutDate <= checkinDate) {
    alert('退房日期必须晚于入住日期');
    return;
  }
  

之前的JSFiddle方案大概率栽在了两个坑上：一是没处理JS日期对象的月份偏移（0开始计数），二是没考虑不同浏览器对日期字符串的解析差异。上面的原生实现能避开这些问题，兼容性也更稳定。

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