Android Chrome中datetime-local控件1582年前日期显示异常求助

一、HTML/CSS层面的可行性 #

没有特殊的HTML或CSS标签可以直接解决这个问题。这是Android Chrome对原生日期选择器的内置处理逻辑差异——它会自动将1582年儒略历转格里高利历之前的日期做日历转换，而Windows Chrome则保持所选日期与输入值一致，这类控件行为无法通过HTML/CSS配置修改。

二、JavaScript检测与修正方案 #

1. 检测浏览器的异常行为 #

可以通过构造测试日期来判断当前浏览器是否存在该转换问题：

function hasJulianGregorianBug() {
  const testInput = document.createElement('input');
  testInput.type = 'datetime-local';
  // 设置一个1582年前的儒略历日期
  testInput.value = '1572-04-01T00:00';
  // 若浏览器自动转换为格里高利历，值会变成1572-04-11T00:00
  return testInput.value === '1572-04-11T00:00';
}

2. 修正日期偏移 #

当检测到异常行为后，需要在用户选择日期时，将浏览器返回的格里高利历日期转回对应的儒略历日期（1582年10月4日及之前的日期，两者相差10天）。具体实现如下：

// 目标input控件
const dateInput = document.querySelector('input[type="datetime-local"]');

// 判断是否需要修正
if (hasJulianGregorianBug()) {
  dateInput.addEventListener('input', function(e) {
    const selectedValue = e.target.value;
    if (!selectedValue) return;

    const [datePart] = selectedValue.split('T');
    const [year, month, day] = datePart.split('-').map(Number);
    const selectedDate = new Date(year, month - 1, day);
    
    // 格里高利历启用日期是1582年10月15日，之前的日期需要修正
    const gregorianStart = new Date(1582, 9, 15);
    if (selectedDate < gregorianStart) {
      // 减去10天，转回用户实际选择的儒略历日期
      const correctedDate = new Date(selectedDate.getTime() - 10 * 24 * 60 * 60 * 1000);
      // 格式化为datetime-local要求的YYYY-MM-DDTHH:mm格式
      const formattedDate = correctedDate.toISOString().slice(0, 16);
      e.target.value = formattedDate;
    }
  });
}

注意事项 #

• 该修正逻辑仅针对1582年10月4日及之前的日期，这是格里高利历推行时的官方转换节点（1582年10月4日后直接跳到10月15日）。
• 如果需要处理更早时期的日期（比如1582年之前不同地区的日历差异），可能需要更复杂的日历转换逻辑，但对于大多数历史事件场景，10天的偏移修正足够覆盖需求。

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