如何实现日期字段placeholder并兼容iOS Safari原生日期选择器

iOS Safari 不支持通过动态修改 input 的 type 属性来唤起原生日期选择器，所以你原有的切换类型方法无法生效。以下是两种可行的解决方法：

方案一：CSS 模拟占位提示（推荐） #

始终使用原生 type="date" 输入框，通过 CSS 和少量 JS 模拟占位文字效果，无需切换输入类型：

HTML 结构 #

<div class="date-input-wrapper">
  <input type="date" id="asdf" />
  <span class="date-placeholder">foop</span>
</div>

CSS 样式 #

.date-input-wrapper {
  position: relative;
  display: inline-block;
}

.date-placeholder {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  pointer-events: none; /* 避免干扰输入框的点击交互 */
}

/* 输入框有值或聚焦时，隐藏占位文字 */
#asdf:not(:placeholder-shown) + .date-placeholder,
#asdf:focus + .date-placeholder {
  display: none;
}

辅助 JS（可选） #

处理初始值和值变化的同步：

const dateInput = document.getElementById('asdf');
const placeholder = document.querySelector('.date-placeholder');

// 初始状态：如果输入框已有值，隐藏占位
if (dateInput.value) {
  placeholder.style.display = 'none';
}

// 值变化时同步占位显示状态
dateInput.addEventListener('input', () => {
  placeholder.style.display = dateInput.value ? 'none' : 'block';
});

方案二：双输入框切换 #

通过两个输入框实现交互：默认显示带占位的文本输入，点击后切换为原生日期输入框并唤起选择器：

HTML 结构 #

<div class="date-input-container">
  <input type="text" class="date-placeholder-input" placeholder="foop" />
  <input type="date" class="date-native-input" style="display: none;" />
</div>

JS 逻辑 #

const placeholderInput = document.querySelector('.date-placeholder-input');
const nativeDateInput = document.querySelector('.date-native-input');

// 点击占位输入时，切换为原生日期输入并聚焦
placeholderInput.addEventListener('click', () => {
  placeholderInput.style.display = 'none';
  nativeDateInput.style.display = 'inline-block';
  nativeDateInput.focus();
});

// 日期选择完成或失焦时，同步值并切换回占位输入
nativeDateInput.addEventListener('blur', () => {
  if (nativeDateInput.value) {
    placeholderInput.value = nativeDateInput.value;
  }
  nativeDateInput.style.display = 'none';
  placeholderInput.style.display = 'inline-block';
});

// 实时同步日期输入框的值到占位输入
nativeDateInput.addEventListener('input', () => {
  placeholderInput.value = nativeDateInput.value;
});

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