能否修改HTML5中input[type="date"]的显示格式？

不行，原生HTML5的<input type="date">无法直接通过属性设置显示格式为dd-mm-yyyy。

原因说明 #

原生date类型输入框的显示格式完全由用户设备的系统区域设置决定：比如系统语言为英语（美国）会显示mm/dd/yyyy，欧洲部分地区会显示dd/mm/yyyy，开发者无法通过HTML属性强制指定显示格式。控件返回的真实值始终是yyyy-mm-dd的ISO格式，和显示格式无关。

可行解决方案 #

• 使用第三方日期选择器库
  像Flatpickr、Datepicker.js这类成熟的库支持自定义显示格式，你可以根据需求配置为dd-mm-yyyy。示例代码（以Flatpickr为例）：

  <!-- 引入库的样式和脚本（可自行下载本地引入） -->
  <link rel="stylesheet" href="flatpickr.min.css">
  <script src="flatpickr.min.js"></script>
  
  <input type="text" id="customDate">
  
  <script>
  flatpickr("#customDate", {
    dateFormat: "d-m-Y", // 设置为dd-mm-yyyy格式
    allowInput: true
  });
  </script>
  

• 手动实现自定义日期输入组件
  用普通文本输入框配合JavaScript，自动格式化输入内容为dd-mm-yyyy，同时添加日期合法性校验：

  <input type="text" id="manualDate" placeholder="dd-mm-yyyy" maxlength="10">
  
  <script>
  const dateInput = document.getElementById('manualDate');
  dateInput.addEventListener('input', (e) => {
    // 只保留数字，自动插入分隔符
    let inputValue = e.target.value.replace(/\D/g, '');
    if (inputValue.length >= 2) {
      inputValue = `${inputValue.slice(0,2)}-${inputValue.slice(2)}`;
    }
    if (inputValue.length >= 5) {
      inputValue = `${inputValue.slice(0,5)}-${inputValue.slice(5,9)}`;
    }
    e.target.value = inputValue.slice(0,10);
  });
  
  // 可选：添加日期合法性校验函数
  function isValidDate(dateStr) {
    const parts = dateStr.split('-');
    const date = new Date(parts[2], parts[1]-1, parts[0]);
    return date && date.getMonth() + 1 === parseInt(parts[1]);
  }
  </script>
  

• 仅转换提交时的日期格式
  如果可以接受显示格式跟随系统设置，只是需要提交数据为dd-mm-yyyy，可以在表单提交时将原生控件的ISO格式值转换为目标格式：

  <form id="dateForm">
    <input type="date" id="nativeDate">
    <button type="submit">提交</button>
  </form>
  
  <script>
  document.getElementById('dateForm').addEventListener('submit', (e) => {
    e.preventDefault();
    const isoDate = document.getElementById('nativeDate').value;
    if (isoDate) {
      const [year, month, day] = isoDate.split('-');
      const formattedDate = `${day}-${month}-${year}`;
      // 此处将formattedDate作为参数提交
      console.log('提交日期：', formattedDate);
      // 执行表单提交逻辑
    }
  });
  </script>
  

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