如何将HTML Date picker数据转换为MM/DD/YYYY格式文本字符串

首先你代码里有个关键问题：同一个页面里的ID必须唯一，你给日期输入框和目标div都用了DayOW这个ID，这会导致后续JS无法正确获取元素，先把div的ID改成比如displayDate。

接下来用JavaScript实现日期格式转换和填充，步骤如下：

1. 获取日期输入框和目标显示div的DOM元素
2. 监听输入框的change事件，当用户选择日期时触发处理逻辑
3. 将输入框返回的YYYY-MM-DD格式日期转换成MM/DD/YYYY
4. 将转换后的日期填充到div中，若用户清空日期则恢复下划线

完整代码示例：

<form action="/action_page.php">
  <label for="DayOW">Day of the week:</label>
  <input type="date" id="DayOW" name="DayOW">
  <div id="displayDate">_______________</div>
</form>

<script>
// 获取DOM元素
const dateInput = document.getElementById('DayOW');
const displayDiv = document.getElementById('displayDate');

// 监听日期变化事件
dateInput.addEventListener('change', function() {
  const selectedDate = this.value;
  if (selectedDate) {
    // 分割日期：YYYY-MM-DD → [年, 月, 日]
    const [year, month, day] = selectedDate.split('-');
    // 组合成MM/DD/YYYY格式
    const formattedDate = `${month}/${day}/${year}`;
    // 填充到div
    displayDiv.textContent = formattedDate;
  } else {
    // 清空日期时恢复下划线
    displayDiv.textContent = '_______________';
  }
});
</script>

关键说明： #

• HTML的input[type="date"]默认返回的日期格式是YYYY-MM-DD，所以需要手动分割重组
• 使用split('-')将日期字符串拆分成数组，再按MM/DD/YYYY的顺序拼接
• 监听change事件确保只有用户选择或修改日期时才触发更新

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