如何在JavaScript中获取指定区域设置的本地化日期格式？

阿华AIGC实验室

2026-4-23

你提到的这个需求其实很多开发者都遇到过——浏览器明明能在<input type="date">里显示对应区域的本地化占位符（比如法语区的jj/mm/aaaa、德语区的TT.mm.jjjj），那有没有办法直接通过JS拿到这个格式呢？

首先得明确：目前没有标准的JS API能直接返回这种本地化的占位符模板，Intl.DateTimeFormat API的核心是格式化实际的日期值，而非输出本地化的占位符文本。不过我们有两种可行的解决方案：

方案一：借助浏览器的日期输入框间接获取（推荐浏览器环境使用）

既然浏览器本身已经有这套本地化数据，我们可以创建一个隐藏的日期输入框，读取它的placeholder属性——这是最准确、最省心的方式，不需要自己维护任何映射表：

function getLocalizedDateFormat(locale) {
  const dateInput = document.createElement('input');
  dateInput.type = 'date';
  // 设置输入框的区域设置
  dateInput.lang = locale;
  
  // 必须先把元素挂载到DOM上，浏览器才会渲染本地化占位符
  document.body.appendChild(dateInput);
  const placeholder = dateInput.placeholder;
  // 用完立即移除，避免污染DOM
  document.body.removeChild(dateInput);
  
  return placeholder;
}

// 测试示例
console.log(getLocalizedDateFormat('fr-FR')); // 输出 "jj/mm/aaaa"
console.log(getLocalizedDateFormat('en-US')); // 输出 "mm/dd/yyyy"
console.log(getLocalizedDateFormat('de-DE')); // 输出 "TT.mm.jjjj"

优缺点

✅ 优点：完全复用浏览器内置的本地化数据，准确性拉满，不需要手动维护任何规则
❌ 缺点：依赖DOM环境，Node.js等非浏览器场景无法使用；部分旧浏览器对lang属性的支持可能有差异

方案二：基于Intl API配合自定义映射表（适合非浏览器环境）

如果是在Node.js这类没有DOM的环境中，只能在你现有formatToParts的基础上，手动维护一套不同区域的占位符映射规则：

function getLocalizedDateFormat(locale) {
  // 先用Intl获取日期各部分的顺序和分隔符
  const formatParts = new Intl.DateTimeFormat(locale, {
    year: "numeric",
    month: "2-digit",
    day: "2-digit",
  }).formatToParts(new Date());

  // 手动维护不同区域的占位符映射
  const localePlaceholders = {
    'fr-FR': { year: 'aaaa', month: 'mm', day: 'jj' },
    'en-US': { year: 'yyyy', month: 'mm', day: 'dd' },
    'de-DE': { year: 'jjjj', month: 'mm', day: 'TT' },
    // 可以根据需求继续添加更多区域
  };

  // 默认使用通用占位符（如果没有对应区域的映射）
  const defaultPlaceholders = { year: 'YYYY', month: 'MM', day: 'DD' };
  const placeholders = localePlaceholders[locale] || defaultPlaceholders;

  // 拼接成最终的本地化格式模板
  return formatParts.reduce((acc, part) => {
    const { type, value } = part;
    switch(type) {
      case 'year':
        return acc + placeholders.year;
      case 'month':
        return acc + placeholders.month;
      case 'day':
        return acc + placeholders.day;
      default:
        return acc + value;
    }
  }, '');
}

// 测试示例
console.log(getLocalizedDateFormat('fr-FR')); // 输出 "jj/mm/aaaa"
console.log(getLocalizedDateFormat('de-DE')); // 输出 "TT.mm.jjjj"