SPA应用中如何恢复Moment.js的calendarFormat默认值？

嘿，这个问题我太熟了！其实核心思路就是别碰全局配置，或者碰了之后能拉回默认值，分两种场景给你说：

场景1：只在部分区域用自定义格式（推荐！） #

这是最省心的做法——完全不用修改全局的calendar配置，需要自定义的地方单独传参数就行：

• 普通区域（用默认格式）：直接调用不带配置的calendar()，比如：

  // 自动用当前locale的默认日历格式
  moment(new Date()).calendar();
  

• 需要自定义的区域：给calendar()传第二个参数（自定义规则），第一个参数传null表示用当前时间作为参考：

  // 这里写你的自定义格式规则
  const customCalendarConfig = {
    lastDay: '[昨天晚上] HH:mm',
    sameDay: '[今天] HH:mm',
    nextDay: '[明天] HH:mm',
    lastWeek: '[上周] dddd HH:mm',
    nextWeek: '[下周] dddd HH:mm',
    sameElse: 'YYYY-MM-DD'
  };
  // 仅这个实例用自定义格式
  moment(new Date()).calendar(null, customCalendarConfig);
  

这样其他区域根本不受影响，天然用默认值，完美适配SPA里不同组件的需求。

场景2：已经改了全局配置，想恢复默认 #

如果你之前手滑用moment.updateLocale()修改了全局的calendar规则，现在要拉回默认值，有两种办法：

1. 提前备份默认配置（推荐提前做）
   页面初始化的时候先把原始的locale配置存起来，需要恢复的时候直接覆盖回去：

   // 初始化时保存默认配置（以英文locale为例）
   const originalEnLocale = { ...moment.localeData('en') };
   
   // 之后需要恢复默认时
   moment.updateLocale('en', originalEnLocale);
   

2. 手动重置为内置默认规则
   如果没备份，直接把对应locale的默认calendar规则写回去就行。比如中文locale的默认规则是：

   moment.updateLocale('zh-cn', {
     calendar: {
       lastDay: '[昨天] LT',
       sameDay: '[今天] LT',
       nextDay: '[明天] LT',
       lastWeek: '[上周] dddd [LT]',
       nextWeek: '[下周] dddd [LT]',
       sameElse: 'L'
     }
   });
   

最后给个小建议：SPA里组件都是独立的，尽量别改全局的日期格式化配置，不然哪天别的组件用默认格式的时候会踩坑，局部传配置才是更稳妥的方式～

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