基于用户选择自定义react-intl日期格式的实现方案

用date-fns实现任意格式的日期格式化 #

Intl API的日期格式化受限于本地化规则，无法自由指定排列顺序和精确格式，而date-fns的format函数正好解决这个问题，支持你需要的dd/mm/yyyy、mm/dd/yyyy、yyyy/dd/mm等任意自定义格式。

步骤1：安装date-fns

npm install date-fns
# 或
yarn add date-fns

步骤2：基础格式化示例

直接使用format函数，传入日期对象和目标格式字符串即可：

import { format } from 'date-fns';

const targetDate = new Date();

// 格式化为dd/mm/yyyy
console.log(format(targetDate, 'dd/MM/yyyy')); // 输出示例：03/01/2023

// 格式化为mm/dd/yyyy
console.log(format(targetDate, 'MM/dd/yyyy')); // 输出示例：01/03/2023

// 格式化为yyyy/dd/mm
console.log(format(targetDate, 'yyyy/dd/MM')); // 输出示例：2023/03/01

注意：date-fns中用MM表示两位数月份（01-12），dd表示两位数日期（01-31），yyyy表示四位数年份；如果需要一位数的月/日，可以用M或d。

步骤3：根据用户选择动态格式化

可以把用户选择的格式字符串作为变量传入format函数，实现动态切换：

import { format } from 'date-fns';

// 假设用户选择的格式存在userSelectedFormat变量中
const userSelectedFormat = 'dd/MM/yyyy'; // 可替换为用户选择的其他格式
const targetDate = new Date();

const formattedDate = format(targetDate, userSelectedFormat);
console.log(formattedDate);

不依赖第三方库的简易实现 #

如果不想引入date-fns，也可以自己写一个简单的格式化函数，处理常见的格式占位符：

function formatDate(date, formatStr) {
  const day = String(date.getDate()).padStart(2, '0');
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需+1
  const year = date.getFullYear();
  const year2Digits = String(year).slice(-2);

  return formatStr
    .replace('dd', day)
    .replace('mm', month)
    .replace('yyyy', year)
    .replace('yy', year2Digits);
}

// 使用示例
const targetDate = new Date();
console.log(formatDate(targetDate, 'dd/mm/yyyy')); // 03/01/2023
console.log(formatDate(targetDate, 'mm/dd/yy')); // 01/03/23
console.log(formatDate(targetDate, 'yyyy/dd/mm')); // 2023/03/01

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