如何使用jQuery获取type=date输入框的日期显示格式

type="date"输入框的显示格式由浏览器/系统区域设置决定（比如你遇到的MM/DD/YYYY），但它仅接受YYYY-MM-DD格式的实际值。要实现任意格式粘贴兼容，核心是先识别浏览器的显示格式，再将粘贴文本转换为标准格式，具体实现如下：

1. 识别浏览器的日期显示格式 #

直接获取格式字符串（如MM/DD/YYYY）没有原生API支持，但可以通过测试已知日期的本地化输出反向推导：

function getDateDisplayPattern() {
  // 用已知日期（2024年1月2日）生成本地化字符串
  const testDate = new Date('2024-01-02');
  const formattedStr = testDate.toLocaleDateString();
  // 拆分字符串，匹配年、月、日对应的位置
  const parts = formattedStr.split(/[\/\-\.]/);
  const pattern = [];
  parts.forEach(part => {
    if (part === '01') pattern.push('MM');
    else if (part === '02') pattern.push('DD');
    else if (part === '2024') pattern.push('YYYY');
  });
  return pattern.join('/');
}

2. 处理粘贴事件并转换格式 #

监听输入框的paste事件，拦截粘贴文本，根据识别出的显示格式转换为YYYY-MM-DD：

const dateInput = document.querySelector('input[type="date"]');

dateInput.addEventListener('paste', (e) => {
  e.preventDefault();
  const pastedText = e.clipboardData.getData('text').trim();
  if (!pastedText) return;

  const displayPattern = getDateDisplayPattern();
  const pastedParts = pastedText.split(/[\/\-\.\s]/); // 兼容常见分隔符
  const patternParts = displayPattern.split('/');
  
  let year, month, day;
  // 按显示格式对应粘贴文本的各部分
  for (let i = 0; i < patternParts.length; i++) {
    switch (patternParts[i]) {
      case 'YYYY':
        year = pastedParts[i];
        break;
      case 'MM':
        month = pastedParts[i].padStart(2, '0');
        break;
      case 'DD':
        day = pastedParts[i].padStart(2, '0');
        break;
    }
  }

  // 组装标准格式并验证有效性
  const standardDate = `${year}-${month}-${day}`;
  const validDate = new Date(standardDate);
  if (validDate instanceof Date && !isNaN(validDate)) {
    dateInput.value = standardDate;
  }
});

补充说明 #

• 该方法适配不同区域的显示格式（如DD/MM/YYYY、YYYY/MM/DD等）
• 可扩展分隔符匹配规则，支持更多用户粘贴的格式变体
• 必须保留日期有效性验证，避免输入非法日期值

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