如何转换MUI X Date Range Picker日期格式及计算日期天数差？

1. 将日期转换为dd/MM/yyyy格式 #

你可以继续使用date-fns（推荐）或者原生JavaScript实现，以下是具体方案：

方案一：使用date-fns #

先确保已安装依赖：

npm install date-fns

MUI X Date Range Picker返回的是标准Date对象，直接传入format方法即可：

import { format } from 'date-fns';

// 假设从组件获取的日期范围是 { startDate, endDate }
const formattedStart = format(startDate, 'dd/MM/yyyy');
const formattedEnd = format(endDate, 'dd/MM/yyyy');

如果你的日期是ISO字符串（如2024-05-20T00:00:00.000Z），date-fns的format方法也能直接解析，无需额外转换。

方案二：原生JavaScript实现 #

无需额外依赖，手动拼接日期格式：

function formatToDDMMYYYY(date) {
  const targetDate = new Date(date);
  const day = String(targetDate.getDate()).padStart(2, '0');
  const month = String(targetDate.getMonth() + 1).padStart(2, '0'); // 月份从0开始计数，需+1
  const year = targetDate.getFullYear();
  return `${day}/${month}/${year}`;
}

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

2. 计算两个日期的天数差 #

同样可以用date-fns或原生JS实现：

方案一：使用date-fns的differenceInDays #

import { differenceInDays } from 'date-fns';

// 计算endDate与startDate的天数差（endDate - startDate）
const daysDifference = differenceInDays(endDate, startDate);

该方法会自动处理日期的时区与时间部分，返回整数天数差。

方案二：原生JavaScript实现 #

通过计算毫秒差转换为天数：

function calculateDaysDifference(startDate, endDate) {
  const start = new Date(startDate);
  const end = new Date(endDate);
  // 计算毫秒级差值，转换为天数（1天=86400000毫秒）
  const timeDiff = end.getTime() - start.getTime();
  // 根据需求选择Math.floor（不含结束日）或Math.ceil（包含结束日）
  const daysDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
  return daysDiff;
}

// 使用示例
const diff = calculateDaysDifference(startDate, endDate);

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