Angular 6应用如何适配用户本地日期时间格式及解决兼容问题

我之前也踩过.toLocaleString()在旧版Edge和Chrome里的兼容性坑，给你几个更稳定的方案来获取并适配用户设备的日期时间格式：

方案1：使用Intl.DateTimeFormat（推荐，标准API） #

Intl.DateTimeFormat是ES6引入的标准国际化API，兼容性比.toLocaleString()更稳定，能直接根据用户的系统locale生成符合其习惯的日期格式，还能解析格式的组成部分。

代码示例： #

// 1. 创建默认locale的日期格式化器（自动读取用户设备的locale设置）
const dateFormatter = new Intl.DateTimeFormat(undefined, {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit'
});

// 2. 解析用户的格式模板（比如得到"YY/MM/DD"或"MM/DD/YYYY"）
function getUserDateFormatTemplate() {
  const formatParts = dateFormatter.formatToParts(new Date());
  return formatParts.map(part => {
    switch(part.type) {
      case 'year': return 'YYYY'; // 若需要两位数年份可替换为'YY'
      case 'month': return 'MM';
      case 'day': return 'DD';
      default: return part.value; // 保留分隔符（比如/、-等）
    }
  }).join('');
}

// 3. 直接用格式化器输出符合用户习惯的日期
function formatDateForUser(date) {
  return dateFormatter.format(date);
}

// 用法示例
const userDateFormat = getUserDateFormatTemplate();
console.log(userDateFormat); // 输出如"MM/DD/YYYY"或"YY/MM/DD"
console.log(formatDateForUser(new Date())); // 输出符合用户格式的日期字符串

兼容性说明： #

这个API支持Chrome 24+、Edge 12+，如果要兼容更旧的浏览器，可以引入@formatjs/intl-datetimeformat polyfill来补全。

方案2：通过测试日期逆向推导格式（简单 fallback） #

如果只是需要快速获取格式模板，不需要太精准的话，可以生成一个已知日期，格式化后替换成占位符，逆向得到用户的格式：

function getUserDateFormat() {
  // 测试日期：2023年10月5日（月份是0基，所以9代表10月）
  const testDate = new Date(2023, 9, 5);
  const formatted = testDate.toLocaleDateString();
  
  // 替换已知值为格式占位符
  return formatted
    .replace('2023', 'YYYY')
    .replace('23', 'YY')
    .replace('10', 'MM')
    .replace('05', 'DD')
    .replace('5', 'D');
}

// 用法
console.log(getUserDateFormat()); // 输出用户设备的日期格式模板

注意点： #

这个方法的缺点是依赖toLocaleDateString的输出格式，在某些特殊locale下可能有偏差，但大部分主流场景够用。

关键提醒： #

浏览器无法直接读取用户设备的自定义日期格式（比如用户手动修改了系统预设的格式），只能通过系统的locale设置来推断。如果你的应用需要完全适配自定义格式，建议提供一个手动选择格式的选项作为fallback。

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