酒店预订表单日期字段URL输出格式错误，如何改为mm/dd/yyyy？

原生HTML的type="date"输入框会强制以yyyy-mm-dd格式提交参数，这是规范要求，无法直接通过修改输入框属性改变格式，必须借助JavaScript处理。以下是两种实用的实现方式：

方式一：监听表单提交，动态修改URL参数 #

如果你的日期输入框在表单内，可通过监听表单提交事件，在跳转前替换日期格式：

// 获取表单和日期输入框
const bookingForm = document.querySelector('form');
const dateInInput = document.getElementById('datein');

bookingForm.addEventListener('submit', function(e) {
  // 阻止默认提交行为
  e.preventDefault();
  
  const originalDate = dateInInput.value;
  if (!originalDate) {
    this.submit();
    return;
  }
  
  // 拆分日期并重组为mm/dd/yyyy
  const [year, month, day] = originalDate.split('-');
  const formattedDate = `${month}/${day}/${year}`;
  
  // 构造新的URL并跳转
  const url = new URL(this.action);
  url.searchParams.set('datein', formattedDate);
  // 若有退房日期等其他参数，同理处理
  window.location.href = url.toString();
});

方式二：用隐藏字段+展示框优化用户体验 #

这种方式让用户看到的就是mm/dd/yyyy格式，提交时直接传该格式：

1. 修改HTML结构，保留原生date输入框作为隐藏选择器，新增文本框展示格式化日期：

<!-- 隐藏的原生date输入框，用于获取用户选择的原始日期 -->
<input type="hidden" id="datein-original">
<!-- 展示给用户的文本框，只读避免手动输入错误 -->
<input class="date_in" id="datein-display" placeholder="MM/DD/YYYY" value="" type="text" readonly>

2. 用JavaScript处理日期转换和提交逻辑：

const originalInput = document.getElementById('datein-original');
const displayInput = document.getElementById('datein-display');
const bookingForm = document.querySelector('form');

// 选择日期后格式化展示
originalInput.addEventListener('change', function() {
  const date = this.value;
  if (date) {
    const [year, month, day] = date.split('-');
    displayInput.value = `${month}/${day}/${year}`;
  } else {
    displayInput.value = '';
  }
});

// 点击展示框触发隐藏的日期选择器
displayInput.addEventListener('click', function() {
  originalInput.click();
});

// 提交表单时传入格式化后的日期
bookingForm.addEventListener('submit', function(e) {
  e.preventDefault();
  const formattedDate = displayInput.value;
  if (!formattedDate) {
    alert('请选择入住日期');
    return;
  }
  const url = new URL(this.action);
  url.searchParams.set('datein', formattedDate);
  window.location.href = url.toString();
});

注意：如果是POST请求，只需在提交时修改FormData中的datein值为格式化后的日期即可，无需构造URL跳转。

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