AngularJS应用中按客户端OS日期格式格式化日期的跨浏览器问题

嗨，我来帮你搞定这个AngularJS应用里的日期格式跨浏览器兼容问题！

问题根源 #

你当前的代码在IE里正常，但Chrome、Firefox失效，核心原因是不同浏览器对toLocaleDateString()无参数调用的逻辑不一样：

IE会严格遵循操作系统的区域日期格式，但Chrome、Firefox等现代浏览器默认会优先用浏览器自身的语言设置（而非系统区域格式），除非用户手动在浏览器设置里开启了「使用系统区域设置」的选项。

解决方案 #

下面给你两种靠谱的改进方案，选适合你的就行：

方案1：用原生Intl.DateTimeFormat（最简单可靠）

直接替换你的函数，这个API是标准的国际化API，现代浏览器和IE11+都支持，会自动适配系统的区域日期格式：

function getFormatedDateTime(date) {
  // 不带参数的Intl.DateTimeFormat会自动读取系统区域格式
  return new Intl.DateTimeFormat().format(date);
}

测试时注意：修改系统日期格式后，可能需要重启Chrome/Firefox才能看到效果（浏览器会缓存区域设置）。

方案2：结合Moment.js精准匹配格式

如果你想继续用Moment.js，可以通过Intl.DateTimeFormat获取系统的格式规则，再转成Moment能识别的格式字符串，灵活性更高：

function getFormatedDateTime(date) {
  // 获取系统默认的日期格式配置
  const formatOptions = new Intl.DateTimeFormat().resolvedOptions();
  // 把Intl配置转成Moment格式
  const momentFormat = convertIntlOptionsToMomentFormat(formatOptions);
  
  return moment(date).format(momentFormat);
}

// 辅助函数：将Intl的日期选项转换为Moment格式字符串
function convertIntlOptionsToMomentFormat(options) {
  let formatParts = [];
  
  // 处理年份：2位数/4位数
  formatParts.push(options.year === '2-digit' ? 'YY' : 'YYYY');
  // 处理月份：数字/短名称/长名称
  switch(options.month) {
    case '2-digit':
      formatParts.push('MM');
      break;
    case 'long':
      formatParts.push('MMMM');
      break;
    case 'short':
      formatParts.push('MMM');
      break;
    default:
      formatParts.push('M');
  }
  // 处理日期：2位数/1位数
  formatParts.push(options.day === '2-digit' ? 'DD' : 'D');
  
  // 用系统的日期分隔符连接（比如/或-）
  return formatParts.join(options.dateSeparator || '/');
}

这个方案能精准匹配系统里设置的年份位数、月份显示样式、日期位数，甚至分隔符，完全同步系统设置。

额外提示 #

• 如果用户在Chrome/Firefox里手动指定了语言（比如强制用英文），那么浏览器会优先用该语言的格式，这是用户的主动选择，属于正常行为
• 确保你的项目环境支持Intl.DateTimeFormat，如果是极旧的浏览器（比如IE10及以下），可能需要引入polyfill，但现在基本不用考虑了

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