iOS设备Date Picker异常求助：自动填充与图标重叠问题

问题1：阻止未确认时自动填充日期 #

iOS Safari的原生type="date"输入框会在用户选择日期后立即更新输入框值，无需点击“Done”，这是浏览器默认行为，无法通过系统设置关闭。可通过以下两种方案解决：

方案1：替换为第三方日期选择器 #

放弃原生type="date"，改用type="text"配合第三方库（如Flatpickr、Datepicker.js），完全控制选择流程，仅在用户确认后更新输入框值。

方案2：JS拦截原生行为 #

通过隐藏原生date输入框，用文本框展示值，点击时触发原生选择器，仅在用户确认后同步值：

<!-- 修改后的HTML结构 -->
<div style="margin-top:20px; position: relative;">
  <input class="textbox dateFilter px-3 py-0 date-picker-height-sm w-100" id="displayDate" placeholder="DD/MM/YYYY" type="text" readonly>
  <input id="hiddenDate" type="date" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;">
</div>

// 同步选择结果逻辑
const displayInput = document.getElementById('displayDate');
const hiddenInput = document.getElementById('hiddenDate');

hiddenInput.addEventListener('change', function() {
  const date = new Date(this.value);
  const formattedDate = `${String(date.getDate()).padStart(2, '0')}/${String(date.getMonth()+1).padStart(2, '0')}/${date.getFullYear()}`;
  displayInput.value = formattedDate;
});

问题2：解决日期值与日历图标重叠 #

iOS原生date输入框自带右侧日历图标，结合你的direction: rtl设置，会导致文本与图标重叠。可通过以下CSS调整解决：

方案1：增加右侧内边距（适配RTL） #

为输入框添加足够的padding-right，避开原生图标位置：

.dateFilter {
  border: .1px solid #c5c6c861;
  border-radius: .4rem;
  outline: none;
  /* 针对iOS RTL布局增加右侧内边距，避开原生图标 */
  padding-right: 2.5em;
}

方案2：隐藏原生图标，自定义图标 #

如果不需要原生图标，可隐藏它并添加自定义图标：

/* 隐藏iOS原生日历图标 */
.dateFilter::-webkit-calendar-picker-indicator {
  display: none;
}

/* 添加自定义图标（示例） */
.date-width-sm > div:last-child {
  position: relative;
}
.date-width-sm > div:last-child::after {
  content: '📅';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

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