React项目中day.js全局配置的存放位置及全局生效方案

1. 创建全局配置文件 #

在项目的工具类目录（比如src/utils/）下新建一个dayjs-config.js文件，集中管理Day.js的所有全局配置规则。

2. 编写配置代码 #

在这个文件里完成插件加载、默认时区设置和format方法重写：

import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';

// 加载utc和timezone插件
dayjs.extend(utc);
dayjs.extend(timezone);

// 设置默认时区为America/New_York
dayjs.tz.setDefault('America/New_York');

// 重写format方法，默认使用YYYY-MM-DD格式
const originalFormat = dayjs.prototype.format;
dayjs.prototype.format = function (formatStr = 'YYYY-MM-DD') {
  return originalFormat.call(this, formatStr);
};

// 导出配置后的dayjs实例
export default dayjs;

3. 在项目入口全局引入 #

找到React项目的入口文件（通常是src/index.js或src/main.jsx），在文件最顶部导入这个配置文件，确保全局生效：

// 全局导入Day.js配置，所有组件都会自动应用这些规则
import './utils/dayjs-config';

4. 组件中直接使用 #

之后在任何组件或业务文件里使用Day.js时，直接导入dayjs即可，无需重复配置：

import dayjs from 'dayjs';

// 示例1：使用默认格式输出日期
console.log(dayjs().format()); // 输出纽约时区下的YYYY-MM-DD格式日期
// 示例2：自定义格式覆盖默认
console.log(dayjs().format('YYYY-MM-DD HH:mm:ss'));

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