如何将MUI DatePicker返回值转为DD/MM/YYYY格式用于年龄计算？

下面是几种实用的实现方式，按需选择：

方法一：用date-fns（MUI官方推荐工具库） #

1. 先安装依赖：

   npm install date-fns
   

2. 导入并使用format函数转换格式：

   import { format } from 'date-fns';
   
   // 假设selectedDate是DatePicker返回的日期对象
   const formattedDate = format(selectedDate, 'dd/MM/yyyy');
   

方法二：用Moment.js（适合已有该库的项目） #

1. 安装依赖：

   npm install moment
   

2. 快速转换格式：

   import moment from 'moment';
   
   const formattedDate = moment(selectedDate).format('DD/MM/YYYY');
   

方法三：原生JavaScript实现（无需额外库） #

自己写个简单函数处理日期格式：

function formatToDDMMYYYY(date) {
  const day = String(date.getDate()).padStart(2, '0');
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 注意月份是从0开始计数的，要加1
  const year = date.getFullYear();
  return `${day}/${month}/${year}`;
}

// 使用示例
const formattedDate = formatToDDMMYYYY(selectedDate);

额外提示：计算年龄无需转字符串 #

其实计算年龄直接用Date对象更准确，不用先转成DD/MM/YYYY格式，给你个实用的年龄计算函数：

function getAge(birthDate) {
  const today = new Date();
  let age = today.getFullYear() - birthDate.getFullYear();
  const monthGap = today.getMonth() - birthDate.getMonth();
  // 如果当前月份小于出生月份，或者同月但日期还没到，年龄减1
  if (monthGap < 0 || (monthGap === 0 && today.getDate() < birthDate.getDate())) {
    age--;
  }
  return age;
}

// 直接传入DatePicker返回的日期对象即可
const userAge = getAge(selectedDate);

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