HTML中type="date"输入框默认占位符无法修改为DD.MM.YYYY，如何解决？

原生<input type="date">的占位文本由浏览器默认规则控制，无法直接通过placeholder属性修改，以下是3种可落地的实现方案：

方案1：CSS伪类实现（无侵入，实现成本最低） #

该方案利用不同浏览器提供的日期输入框专属伪元素，修改空值状态下的显示内容，完全保留原生日期选择功能：

<!-- HTML代码 -->
<input type="date" class="custom-date-input">

/* CSS代码 */
.custom-date-input {
  position: relative;
}
/* 隐藏空值状态下的默认日期文本 */
.custom-date-input:invalid::-webkit-datetime-edit {
  color: transparent;
}
.custom-date-input:focus::-webkit-datetime-edit {
  color: inherit;
}
/* Webkit内核浏览器（Chrome、Edge、Safari）自定义占位文本 */
.custom-date-input:placeholder-shown::before {
  content: 'DD.MM.YYYY';
  color: #6e6e6e;
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
/* Firefox浏览器适配 */
.custom-date-input::-moz-placeholder {
  color: #6e6e6e;
  opacity: 1;
  content: 'DD.MM.YYYY';
}

• 优点：无需编写JS逻辑，原生交互完全保留，实现成本极低
• 缺点：不同浏览器伪元素规则存在差异，需要做多端兼容性测试

方案2：JS动态切换输入框类型（表现一致，兼容性最优） #

该方案通过动态切换输入框的type属性，实现全浏览器统一的占位符效果，还可以自定义选中后的日期显示格式：

<!-- HTML代码 -->
<input type="text" placeholder="DD.MM.YYYY" class="custom-date-input">

// JS代码
const dateInput = document.querySelector('.custom-date-input');

// 聚焦时切换为date类型唤起原生选择器
dateInput.addEventListener('focus', () => {
  dateInput.type = 'date';
  dateInput.showPicker();
});

// 失焦且无值时切回text类型显示占位符
dateInput.addEventListener('blur', () => {
  if (!dateInput.value) {
    dateInput.type = 'text';
  }
});

// 选择日期后格式化显示为DD.MM.YYYY格式
dateInput.addEventListener('change', () => {
  if (dateInput.value) {
    // 存储原生标准格式值用于表单提交
    dateInput.dataset.rawValue = dateInput.value;
    const [year, month, day] = dateInput.value.split('-');
    dateInput.type = 'text';
    dateInput.value = `${day.padStart(2, '0')}.${month.padStart(2, '0')}.${year}`;
  }
});

• 优点：全浏览器表现完全一致，占位符和显示格式都可自定义，兼容性覆盖99%以上的浏览器场景
• 缺点：需要额外编写JS逻辑处理，表单提交时需从dataset.rawValue取标准日期格式或自行做格式转换

方案3：自定义日期选择组件 #

如果项目对UI一致性、交互扩展性要求极高，可以放弃原生type="date"输入框，自行开发或引入组件库的日期选择组件，完全自定义占位符、样式、交互逻辑，适合中大型项目使用。

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