求助：Safari 5.1.7中date-input-polyfill失效问题

我来帮你搞定这个问题——Safari 5.1.7（Windows版）是个相当老旧的浏览器，完全不支持原生input[type="date"]，而且你用的date-input-polyfill大概率已经放弃适配这种超老版本了。既然你不想依赖第三方类库，我们可以自己实现一个轻量级的降级方案，完全用原生JS搞定。

问题根源 #

Safari 5.1.7发布于2012年，对HTML5的表单控件支持非常有限，它会把type="date"的输入框自动降级成普通文本框，而且很多现代JS API也不支持，这就是第三方polyfill失效的核心原因。

无依赖Polyfill实现步骤 #

1. 先做浏览器支持检测 #

首先写个简单的函数，判断当前浏览器是否真的支持input[type="date"]：

function supportsDateInput() {
  const testInput = document.createElement('input');
  testInput.type = 'date';
  // 老浏览器会把type="date"转回type="text"，或者无法设置ISO格式的value
  return testInput.type === 'date' && testInput.value !== '';
}

2. 替换为自定义日期选择组件 #

如果检测到不支持，我们把原date输入框替换成年/月/日的下拉选择器，同时保证选择的值能同步回原输入框，不影响表单提交。下面是完整的可运行代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Date Polyfill</title>
<style>
  .date-polyfill-wrapper {
    display: flex;
    gap: 8px;
    align-items: center;
  }
  .date-polyfill-wrapper select {
    padding: 4px 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
</style>
</head>
<body>
Date Field : <input type="date" name="polyfill-date" id="polyfill-date">

<script>
// 检测浏览器是否支持date输入
function supportsDateInput() {
  const testInput = document.createElement('input');
  testInput.type = 'date';
  return testInput.type === 'date' && testInput.value !== '';
}

// 创建自定义日期选择组件
function createDatePolyfill(originalInput) {
  // 生成容器包裹三个下拉框
  const wrapper = document.createElement('div');
  wrapper.className = 'date-polyfill-wrapper';

  // 生成年份选择器（覆盖过去50年到未来10年）
  const yearSelect = document.createElement('select');
  const currentYear = new Date().getFullYear();
  for (let year = currentYear - 50; year <= currentYear + 10; year++) {
    const option = document.createElement('option');
    option.value = year;
    option.textContent = year;
    yearSelect.appendChild(option);
  }

  // 生成月份选择器（显示英文缩写）
  const monthSelect = document.createElement('select');
  for (let month = 1; month <= 12; month++) {
    const option = document.createElement('option');
    option.value = month.toString().padStart(2, '0');
    option.textContent = new Date(0, month - 1).toLocaleString('en', { month: 'short' });
    monthSelect.appendChild(option);
  }

  // 生成日期选择器，会根据年月动态调整可选天数
  const daySelect = document.createElement('select');
  function updateDayOptions() {
    const selectedYear = parseInt(yearSelect.value);
    const selectedMonth = parseInt(monthSelect.value) - 1;
    // 获取当前年月的最大天数
    const maxDay = new Date(selectedYear, selectedMonth + 1, 0).getDate();
    
    // 清空现有选项
    daySelect.innerHTML = '';
    for (let day = 1; day <= maxDay; day++) {
      const option = document.createElement('option');
      option.value = day.toString().padStart(2, '0');
      option.textContent = day;
      daySelect.appendChild(option);
    }
  }

  // 初始化日期选项
  updateDayOptions();
  // 监听年月变化，更新日期选项
  yearSelect.addEventListener('change', updateDayOptions);
  monthSelect.addEventListener('change', updateDayOptions);

  // 同步选择器的值到原输入框
  function syncValueToOriginal() {
    const year = yearSelect.value;
    const month = monthSelect.value;
    const day = daySelect.value;
    originalInput.value = `${year}-${month}-${day}`;
  }

  // 监听选择变化，实时同步
  yearSelect.addEventListener('change', syncValueToOriginal);
  monthSelect.addEventListener('change', syncValueToOriginal);
  daySelect.addEventListener('change', syncValueToOriginal);

  // 如果原输入框有初始值，设置到选择器上
  if (originalInput.value) {
    const [year, month, day] = originalInput.value.split('-');
    yearSelect.value = year;
    monthSelect.value = month;
    updateDayOptions(); // 先更新天数再设置日期
    daySelect.value = day;
    syncValueToOriginal();
  }

  // 隐藏原输入框，插入自定义组件
  originalInput.style.display = 'none';
  originalInput.parentNode.insertBefore(wrapper, originalInput.nextSibling);
  wrapper.appendChild(yearSelect);
  wrapper.appendChild(monthSelect);
  wrapper.appendChild(daySelect);

  // 表单提交时强制同步一次，防止遗漏
  const parentForm = originalInput.closest('form');
  if (parentForm) {
    parentForm.addEventListener('submit', syncValueToOriginal);
  }
}

// 页面加载完成后执行检测和替换
document.addEventListener('DOMContentLoaded', function() {
  const dateInput = document.getElementById('polyfill-date');
  if (dateInput && !supportsDateInput()) {
    createDatePolyfill(dateInput);
  }
});
</script>
</body>
</html>

方案优势 #

• 完全无依赖：纯原生JS和HTML/CSS，不需要任何第三方库。
• 格式兼容：选择后的值会同步成原生input[type="date"]要求的YYYY-MM-DD格式，表单提交时后端能拿到和原生控件一样的参数。
• 自适应日期范围：会自动根据选中的年月调整日期的可选数量，处理闰年、2月天数等问题。
• 不破坏原有结构：原输入框只是被隐藏，表单提交逻辑完全不需要修改。

为什么之前的polyfill没用？ #

date-input-polyfill这类库通常只支持到相对现代的浏览器版本，Safari 5.1.7实在太老了，已经不在它们的兼容范围内。自己实现的轻量方案更适合这种极端的兼容场景。

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