时间范围展示格式化

最新推荐文章于 2025-01-04 13:53:35 发布

SarinaDu

最新推荐文章于 2025-01-04 13:53:35 发布

阅读量349

点赞数 5

文章标签：前端 javascript 数据库

本文链接：https://blog.youkuaiyun.com/m0_37148591/article/details/143237480

版权

借助 moment 组件

/**
 * @desc 时间范围展示格式化
 * 同一天：YYYY.MM.DD HH:mm ~ HH:mm
 * 同年同月但不同天：YYYY.MM.DD HH:mm ~ MM.DD HH:mm
 * 同年不同月：YYYY.MM.DD HH:mm ~ MM.DD HH:mm
 * 不同年不同月：YYYY.MM.DD HH:mm ~ YYYY.MM.DD HH:mm
 */
export function formatTimeRange(start, end) {
  const startMoment = moment(start)
  const endMoment = moment(end)

  if (!startMoment.isValid() || !endMoment.isValid()) {
    return '无效的日期'
  }

  const dateFormat = 'YYYY.MM.DD'
  const timeFormat = 'HH:mm'

  if (startMoment.isSame(endMoment, 'day')) {
    return `${startMoment.format(dateFormat)} ${startMoment.format(timeFormat)} ~ ${endMoment.format(timeFormat)}` // 同一天
  } else if (startMoment.isSame(endMoment, 'year') && startMoment.isSame(endMoment, 'month')) {
    return `${startMoment.format(dateFormat)} ${startMoment.format(timeFormat)} ~ ${endMoment.format(`MM.DD ${timeFormat}`)}` // 同年同月但不同天
  } else if (startMoment.isSame(endMoment, 'year')) {
    return `${startMoment.format(dateFormat)} ${startMoment.format(timeFormat)} ~ ${endMoment.format(`MM.DD ${timeFormat}`)}` // 同年不同月
  } else {
    return `${startMoment.format(dateFormat)} ${startMoment.format(timeFormat)} ~ ${endMoment.format(dateFormat)} ${endMoment.format(timeFormat)}` // 不同年不同月
  }
}

js 原生

function formatTimeRange(start, end) {
    const startDate = new Date(start);
    const endDate = new Date(end);

    if (isNaN(startDate) || isNaN(endDate)) {
        return '无效的日期';
    }

    const padZero = (num) => (num < 10 ? '0' + num : num);
    const formatDate = (date) => `${date.getFullYear()}.${padZero(date.getMonth() + 1)}.${padZero(date.getDate())}`;
    const formatTime = (date) => `${padZero(date.getHours())}:${padZero(date.getMinutes())}`;

    if (startDate.toDateString() === endDate.toDateString()) {
        return `${formatDate(startDate)} ${formatTime(startDate)} ~ ${formatTime(endDate)}`; // 同一天
    } else if (startDate.getFullYear() === endDate.getFullYear() && startDate.getMonth() === endDate.getMonth()) {
        return `${formatDate(startDate)} ${formatTime(startDate)} ~ ${padZero(endDate.getDate())}.${padZero(endDate.getMonth() + 1)} ${formatTime(endDate)}`; // 同年同月但不同天
    } else if (startDate.getFullYear() === endDate.getFullYear()) {
        return `${formatDate(startDate)} ${formatTime(startDate)} ~ ${padZero(endDate.getDate())}.${padZero(endDate.getMonth() + 1)} ${formatTime(endDate)}`; // 同年不同月
    } else {
        return `${formatDate(startDate)} ${formatTime(startDate)} ~ ${formatDate(endDate)} ${formatTime(endDate)}`; // 不同年不同月
    }
}

// 示例用法
const start1 = '2024-10-25T14:00:00';
const end1 = '2024-10-25T16:30:00';

const start2 = '2024-10-20T14:00:00';
const end2 = '2024-10-25T16:30:00';

const start3 = '2024-10-20T14:00:00';
const end3 = '2025-10-25T16:30:00';

const start4 = '2024-10-20T14:00:00';
const end4 = '2024-11-20T16:30:00';

console.log(formatTimeRange(start1, end1)); // 同一天
console.log(formatTimeRange(start2, end2)); // 同年同月但不同天
console.log(formatTimeRange(start3, end3)); // 同年不同月
console.log(formatTimeRange(start4, end4)); // 不同年不同月