如何将input type="date"的日期格式修改为mm/dd/yy？

核心前提说明 #

原生HTML5 <input type="date"> 的显示格式由浏览器、用户操作系统的区域语言设置决定，没有官方支持的HTML属性可以直接自定义显示格式，你当前代码中设置的value="mm/dd/yy"是无效的，原生date输入框的value值仅识别YYYY-MM-DD格式的ISO标准日期字符串。

可行实现方案 #

• 方案1：保留原生日期选择弹窗，做展示层封装
  思路是用普通文本框负责显示mm/dd/yy格式的日期，隐藏原生date输入框，用户点击文本框时触发原生date的选择弹窗，选择完成后将选中的日期转换为两位年的格式回填到文本框即可。
  代码示例：

  <!-- 对外展示的输入框 -->
  Date:<input type="text" id="dateShow" placeholder="mm/dd/yy" required>
  <!-- 隐藏的原生date输入框，负责唤起选择器 -->
  <input type="date" id="dateHide" style="display: none;">
  
  <script>
    const showInput = document.getElementById('dateShow')
    const hideInput = document.getElementById('dateHide')
  
    // 点击展示框唤起原生日期选择器
    showInput.addEventListener('click', () => hideInput.showPicker())
  
    // 选择日期后转换为mm/dd/yy格式展示
    hideInput.addEventListener('input', () => {
      if (hideInput.value) {
        const [year, month, day] = hideInput.value.split('-')
        // 取年份后两位拼接目标格式
        showInput.value = `${month}/${day}/${year.slice(-2)}`
      }
    })
  </script>
  

  如果表单提交时需要传递mm/dd/yy格式的日期，把name="date"属性移到dateShow输入框上即可。

• 方案2：放弃原生date输入框，使用文本框自定义规则
  直接使用type="text"的输入框，通过正则限制用户输入格式为mm/dd/yy，适合不需要弹窗选择、仅接受手动输入的场景：

  Date:<input type="text" id="date" name="date" pattern="\d{2}/\d{2}/\d{2}" placeholder="mm/dd/yy" required>
  

  也可以引入第三方日期选择组件，这类组件均支持自定义任意显示格式。

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