React中如何将字符串日期转换为指定格式（DD-MM-YYYY转MM-DD-YYYY）

以下是两种常用的实现方式，可根据项目实际情况选择：

方案1：原生JS实现（无第三方依赖） #

直接拆分字符串交换日月位置即可，性能最高，无时区兼容问题：

// 转换函数
const convertDDMMYYYYToMMDDYYYY = (dateStr) => {
  // 拆分日期部分和时间部分
  const [dateSegment, timeSegment] = dateStr.split(' ');
  // 拆分日、月、年
  const [day, month, year] = dateSegment.split('-');
  // 按目标格式拼接
  return `${month}-${day}-${year} ${timeSegment}`;
}

// 测试用例
let date = "14-11-2021 10:11:20";
let required = convertDDMMYYYYToMMDDYYYY(date);
console.log(required); // 输出：11-14-2021 10:11:20

如果需要增加格式合法性校验，可添加正则判断避免异常输入报错：

const convertDDMMYYYYToMMDDYYYY = (dateStr) => {
  // 校验输入格式是否符合 DD-MM-YYYY HH:MM:SS
  const formatReg = /^\d{2}-\d{2}-\d{4} \d{2}:\d{2}:\d{2}$/;
  if (!formatReg.test(dateStr)) {
    // 格式不匹配时走兜底逻辑，可根据业务需求调整
    return dateStr;
  }
  const [dateSegment, timeSegment] = dateStr.split(' ');
  const [day, month, year] = dateSegment.split('-');
  return `${month}-${day}-${year} ${timeSegment}`;
}

方案2：使用dayjs实现（适合有复杂日期处理需求的项目） #

如果React项目已经引入了dayjs做日期处理，可以用自定义解析插件实现，后续扩展其他日期操作更方便：

// 先安装依赖：npm install dayjs
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
// 注册自定义解析插件
dayjs.extend(customParseFormat);

const convertDDMMYYYYToMMDDYYYY = (dateStr) => {
  // 按输入格式解析后，按目标格式输出
  return dayjs(dateStr, 'DD-MM-YYYY HH:mm:ss').format('MM-DD-YYYY HH:mm:ss');
}

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