如何在HTML中修改input date控件的日期格式？

原生<input type="date">的显示格式由浏览器根据操作系统区域设置自动决定，无法直接通过HTML属性强制改成dd-mm-yyyy。下面提供几个可行的解决思路：

方案1：依赖用户系统区域设置（局限性大） #

浏览器会匹配用户操作系统的日期格式，比如用户将系统日期格式设为欧洲/英国地区的dd-mm-yyyy，date input就会自动显示对应格式。但该方法完全依赖用户端设置，无法保证所有用户都能看到目标格式，仅可作为补充说明。

方案2：用JavaScript自定义显示与提交（开发者可控） #

核心逻辑是隐藏原生date input（用于提交标准ISO格式日期），使用普通text input显示dd-mm-yyyy格式，通过JS同步两者内容，兼顾显示需求和后端数据格式要求。

修改后的HTML代码： #

<fieldset style="font-size:15px;">
  <!-- 隐藏原生date input，用于提交符合标准的日期数据 -->
  <input type="date" name="fromdate" id="fromdate" style="display:none;">
  <!-- 用于用户输入/查看的文本框，显示dd-mm-yyyy -->
  <input type="text" id="fromdate-display" placeholder="FROM: DD-MM-YYYY">
</fieldset>
<fieldset style="font-size:15px;">
  <input type="date" name="todate" id="todate" style="display:none;">
  <input type="text" id="todate-display" placeholder="TO: DD-MM-YYYY">
</fieldset>

配套JavaScript代码： #

// 将ISO格式日期（yyyy-mm-dd）转为dd-mm-yyyy
function isoToDmy(isoDate) {
  if (!isoDate) return '';
  const [year, month, day] = isoDate.split('-');
  return `${day}-${month}-${year}`;
}

// 将dd-mm-yyyy转为ISO格式日期（yyyy-mm-dd）并验证有效性
function dmyToIso(dmyDate) {
  const parts = dmyDate.split('-');
  if (parts.length !== 3) return '';
  const [day, month, year] = parts;
  const testDate = new Date(`${year}-${month}-${day}`);
  return testDate.toString() !== 'Invalid Date' ? `${year}-${month}-${day}` : '';
}

// 绑定fromdate的同步逻辑
const fromDate = document.getElementById('fromdate');
const fromDateDisplay = document.getElementById('fromdate-display');

// 用户输入后同步到原生input
fromDateDisplay.addEventListener('blur', () => {
  const isoDate = dmyToIso(fromDateDisplay.value);
  if (isoDate) {
    fromDate.value = isoDate;
  } else {
    alert('请输入有效的DD-MM-YYYY格式日期');
    fromDateDisplay.value = '';
    fromDate.value = '';
  }
});

// 原生input变化时同步到显示框（如用户用浏览器自带日期选择器操作）
fromDate.addEventListener('change', () => {
  fromDateDisplay.value = isoToDmy(fromDate.value);
});

// 同理绑定todate
const toDate = document.getElementById('todate');
const toDateDisplay = document.getElementById('todate-display');

toDateDisplay.addEventListener('blur', () => {
  const isoDate = dmyToIso(toDateDisplay.value);
  if (isoDate) {
    toDate.value = isoDate;
  } else {
    alert('请输入有效的DD-MM-YYYY格式日期');
    toDateDisplay.value = '';
    toDate.value = '';
  }
});

toDate.addEventListener('change', () => {
  toDateDisplay.value = isoToDmy(toDate.value);
});

该方案既能让用户看到目标格式，又能保证提交给后端的是标准ISO日期格式，避免后端解析出错。

方案3：使用第三方日期选择器库 #

Flatpickr、Pickaday这类轻量日期选择器库支持自定义显示格式，还自带更美观的选择UI，无需自行编写复杂的日期验证逻辑。

示例（以Flatpickr为例）： #

HTML代码：

<fieldset style="font-size:15px;">
  <input type="text" name="fromdate" class="date-picker" placeholder="FROM: DD-MM-YYYY">
</fieldset>
<fieldset style="font-size:15px;">
  <input type="text" name="todate" class="date-picker" placeholder="TO: DD-MM-YYYY">
</fieldset>

初始化JS代码：

flatpickr('.date-picker', {
  dateFormat: 'd-m-Y', // 显示给用户的格式
  altFormat: 'Y-m-d',  // 实际提交的ISO格式
  altInput: true,      // 启用双输入模式，自动分离显示与提交格式
  altInputClass: 'form-control' // 自定义显示框样式类
});

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