34 lines
936 B
TypeScript
34 lines
936 B
TypeScript
import React from "react";
|
|
import { observer } from "mobx-react";
|
|
// helpers
|
|
import { formatDateRange, getDate } from "@plane/utils";
|
|
|
|
type Props = {
|
|
startDate: Date | string | null | undefined;
|
|
endDate: Date | string | null | undefined;
|
|
className?: string;
|
|
};
|
|
|
|
/**
|
|
* Formats merged date range display with smart formatting
|
|
* - Single date: "Jan 24, 2025"
|
|
* - Same year, same month: "Jan 24 - 28, 2025"
|
|
* - Same year, different month: "Jan 24 - Feb 6, 2025"
|
|
* - Different year: "Dec 28, 2024 - Jan 4, 2025"
|
|
*/
|
|
export const MergedDateDisplay: React.FC<Props> = observer((props) => {
|
|
const { startDate, endDate, className = "" } = props;
|
|
|
|
// Parse dates
|
|
const parsedStartDate = getDate(startDate);
|
|
const parsedEndDate = getDate(endDate);
|
|
|
|
const displayText = formatDateRange(parsedStartDate, parsedEndDate);
|
|
|
|
if (!displayText) {
|
|
return null;
|
|
}
|
|
|
|
return <span className={className}>{displayText}</span>;
|
|
});
|