使用 Moment Js 在 Angular 中将日期列表转换为日期范围答案

【问题标题】：Convert a list of dates to date range in Angular Using Moment Js使用 Moment Js 在 Angular 中将日期列表转换为日期范围
【发布时间】：2022-08-15 22:29:38
【问题描述】：

我有一个如下的日期列表

let dates = [\"2022-12-20\", \"2022-12-21\", \"2022-12-22\", \"2022-12-27\", \"2022-12-30\",\"2022-12-31\", \"2023-01-01\"];

我想将日期数组转换为日期范围，如下面的输出所示

let result = [\"20 Dec - 22 Dec\", \"27 Dec 2022\", \"30 Dec - 1 Jan \"];

下面是我的代码：

fun(dates)
{
    let startDate = this.dates[0], endDateIndex = - 1, finalDateString = \"\", arr = [];
    for (let i = 1; i < dates.length; i++) {

        if (moment(startDate).add(i, \'days\').format(\"YYYY-MM-DD\") == moment(dates[i]).format(\"YYYY-MM-DD\")) {
            endDateIndex = i;
        }
        else {
            finalDateString += endDateIndex > 0 ? moment(startDate).format(\"DD MMM\") + \" - \" +
                moment(dates[endDateIndex]).format(\"DD MMM\") : \'\';
            if (endDateIndex == -1) {
                finalDateString = finalDateString + \" \" + moment(startDate).format(\"DD MMM\") + \",\"
            }
            startDate = dates[i];
            endDateIndex = -1;
        }
    }
    arr.push(finalDateString);
    return arr;
}

在我的代码中，我在日期范围内得到了错误的结果。请指导我建立逻辑。

标签： javascript angular date momentjs date-range

【解决方案1】：

您可以先将日期减少到日期范围：

[
  { "start": "2022-12-20", "end": "2022-12-22" },
  { "start": "2022-12-27" },
  { "start": "2022-12-30", "end": "2023-01-01" }
]

然后格式化范围。

const dates = [
  "2022-12-20", "2022-12-21", "2022-12-22",
  "2022-12-27",
  "2022-12-30", "2022-12-31", "2023-01-01"
];

const parseDate = (date) => moment(date, 'YYYY-MM-DD');

const pushOrSetEnd = (results, last, prev, curr) => {
  if (moment.duration(parseDate(curr).diff(parseDate(prev))).asDays() <= 1) {
      last.end = curr;
    } else {
      results.push({ start: curr });
    }
};

const reduceDatesIntoRanges = (dates) =>
  dates.slice(1).reduce((acc, date) => {
    const last = acc[acc.length - 1];
    pushOrSetEnd(acc, last, last.end ? last.end : last.start, date);
    return acc;
  }, [{ start: dates[0] }]);

const dateRanges = reduceDatesIntoRanges(dates);

const formatDateWithYear = (date) => parseDate(date).format('DD MMM YYYY');

const formatDate = (date) => parseDate(date).format('DD MMM');

const formatDateRange = ({ start, end }) => `${formatDate(start)} - ${formatDate(end)}`;

const formattedDateRanges = dateRanges.map(dateRange => {
  return !dateRange.end
    ? formatDateWithYear(dateRange.start)
    : formatDateRange(dateRange);
});

console.log(formattedDateRanges);

.as-console-wrapper { top: 0; max-height: 100% !important; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>

<!--

const expected = [
  "20 Dec - 22 Dec",
  "27 Dec 2022",
  "30 Dec - 1 Jan"
];

-->

【讨论】：