如何隐藏input type="date"控件但保留日期选择器并通过标签唤起

要实现隐藏原生input[type="date"]元素，同时点击自定义标签唤起日期选择器的效果，可以通过视觉隐藏输入框+自定义标签触发输入框点击事件的方式实现，具体代码如下：

实现代码 #

<h1>Wanted result</h1>
<div>
  <!-- 视觉隐藏的日期输入框，保留交互能力 -->
  <input type="date" id="datepicker" class="visually-hidden">
  <!-- 自定义标签 -->
  <span id="date-trigger">Label</span>
</div>

<style>
/* 视觉隐藏类：隐藏元素但保留交互、可访问性 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
</style>

<script>
// 给自定义标签添加点击事件，触发日期输入框的点击
document.getElementById('date-trigger').addEventListener('click', function() {
  document.getElementById('datepicker').click();
});

// 可选：同步输入框的日期值到自定义标签（如果需要显示选中的日期）
document.getElementById('datepicker').addEventListener('change', function() {
  if (this.value) {
    document.getElementById('date-trigger').textContent = this.value;
  } else {
    document.getElementById('date-trigger').textContent = 'Label';
  }
});
</script>

关键说明 #

• 视觉隐藏输入框：使用visually-hidden类替代display: none，因为display: none会让浏览器完全忽略该元素的交互能力，导致无法触发日期选择器；而视觉隐藏的方式仅让元素不可见，保留其交互和可访问性。
• 自定义标签触发：通过JavaScript给自定义的<span>绑定点击事件，手动触发隐藏输入框的click()方法，从而唤起日期选择器。
• 可选的日期同步：如果需要在自定义标签上显示选中的日期，可以监听输入框的change事件，同步更新标签文本。

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