iOS设备Safari浏览器date类型输入框格式问题求助

iOS Safari 的原生 type="date" 输入控件依赖系统级日历选择器，会强制使用用户设备本地化的日期格式（比如默认的 dd-mmm-yyyy），完全忽略 pattern 和 placeholder 属性，这就是你设置后无效的核心原因。以下是几种可行的解决方法：

1. 自定义文本输入框 + JavaScript 验证 #

放弃原生日期控件，改用普通文本输入框，通过JS实时控制输入格式并验证日期有效性，确保全程显示 dd/mm/yyyy 格式：

<input type="text" id="custom-date-input" pattern="\d{2}/\d{2}/\d{4}" placeholder="dd/mm/yyyy" required>

<script>
const dateInput = document.getElementById('custom-date-input');

// 实时格式化输入内容，自动插入斜杠
dateInput.addEventListener('input', (e) => {
  let inputVal = e.target.value.replace(/\D/g, ''); // 过滤非数字字符
  if (inputVal.length >= 2) {
    inputVal = `${inputVal.slice(0,2)}/${inputVal.slice(2)}`;
  }
  if (inputVal.length >= 5) {
    inputVal = `${inputVal.slice(0,5)}/${inputVal.slice(5,9)}`;
  }
  e.target.value = inputVal.slice(0,10); // 限制总长度为10位
});

// 失去焦点时验证日期合法性（比如排除2月30日这类无效日期）
dateInput.addEventListener('blur', (e) => {
  const inputVal = e.target.value;
  if (!inputVal.match(/^\d{2}\/\d{2}\/\d{4}$/)) {
    e.target.setCustomValidity('请输入 dd/mm/yyyy 格式的日期');
    return;
  }
  const [day, month, year] = inputVal.split('/').map(Number);
  const testDate = new Date(year, month - 1, day);
  if (testDate.getDate() !== day || testDate.getMonth() + 1 !== month || testDate.getFullYear() !== year) {
    e.target.setCustomValidity('请输入有效的日期');
  } else {
    e.target.setCustomValidity('');
  }
});
</script>

2. 使用第三方日期选择器库 #

如果不想手动编写验证逻辑，可以用成熟的第三方库替换原生控件，实现跨浏览器统一的日期选择体验，支持自定义格式。常用的库包括：

• flatpickr：轻量无依赖，支持自定义日期格式、禁用日期等功能
• pickadate.js：针对移动端优化的日期选择库

以 flatpickr 为例，核心代码示例：

<!-- 项目中自行集成库的样式和脚本 -->
<input type="text" id="flatpickr-date" placeholder="dd/mm/yyyy">

<script>
flatpickr('#flatpickr-date', {
  dateFormat: 'd/m/Y', // 设置为 dd/mm/yyyy 格式
  allowInput: true, // 允许手动输入
  locale: {
    firstDayOfWeek: 1 // 可选：设置周一为一周第一天
  }
});
</script>

3. 依赖用户设备设置（不可靠） #

iOS 系统的日期格式由用户在「设置-通用-语言与地区-日期格式」中配置，如果用户设置了「日/月/年」，原生 type="date" 控件会自动显示 dd/mm/yyyy 格式。但这种方式完全依赖用户操作，无法通过代码强制，仅作为补充说明。

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