如何在Angular中按照客户端系统日期格式完成日期格式化

你可以直接使用浏览器内置的Intl.DateTimeFormat API实现需求，这个API会自动读取用户操作系统的区域配置和日期格式偏好，不需要手动判断格式类型。 #

基础实现（零配置） #

直接调用默认实例的format方法即可，输出完全跟随系统设置：

// 示例日期：2021年11月30日（JS中月份从0开始计数，因此10对应11月）
const targetDate = new Date(2021, 10, 30);
// 无参数调用时默认使用用户系统的区域和格式配置
const formattedDate = new Intl.DateTimeFormat().format(targetDate);
console.log(formattedDate);

• 当系统格式为DD-MM-YYYY时，输出为30/11/2021或30-11-2021（跟随系统分隔符配置）
• 当系统格式为MM-DD-YYYY时，输出为11/30/2021或11-30-2021

自定义显示项（固定显示2位月日、4位年份） #

如果需要固定显示完整的年月日、避免部分区域默认省略年份的问题，可以传入配置参数，同时强制使用系统区域配置：

const formatConfig = {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit'
};
const targetDate = new Date(2021, 10, 30);
// 第一个参数传undefined代表强制使用系统默认区域，不受页面语言设置影响
const formattedDate = new Intl.DateTimeFormat(undefined, formatConfig).format(targetDate);

注意事项 #

• 不要手动调用getFullYear、getMonth等方法拼接日期字符串，硬编码的顺序无法适配不同区域的用户格式
• 该API兼容所有现代浏览器（Chrome 24+、Firefox 29+、Safari 10+、Edge 12+），无需引入第三方依赖。如果需要兼容IE11，可以引入对应polyfill实现。

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