fix(dashboard): display minute instead of month (#11731)
**What** - display minutes instead of months - remove manual offsetting since the server returns ISO format and JS date converts it to local time --- CLOSES SUP-1069
This commit is contained in:
@@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
"@medusajs/dashboard": patch
|
||||||
|
---
|
||||||
|
|
||||||
|
fix(dashboard): correctly format date cell time
|
||||||
+10
-12
@@ -1,35 +1,33 @@
|
|||||||
import { Tooltip } from "@medusajs/ui"
|
import { Tooltip } from "@medusajs/ui"
|
||||||
import { format } from "date-fns/format"
|
|
||||||
import { useTranslation } from "react-i18next"
|
import { useTranslation } from "react-i18next"
|
||||||
import { PlaceholderCell } from "../placeholder-cell"
|
import { PlaceholderCell } from "../placeholder-cell"
|
||||||
|
import { useDate } from "../../../../../hooks/use-date"
|
||||||
|
|
||||||
type DateCellProps = {
|
type DateCellProps = {
|
||||||
date?: Date | string | null
|
date?: Date | string | null
|
||||||
}
|
}
|
||||||
|
|
||||||
export const DateCell = ({ date }: DateCellProps) => {
|
export const DateCell = ({ date }: DateCellProps) => {
|
||||||
|
const { getFullDate } = useDate()
|
||||||
|
|
||||||
if (!date) {
|
if (!date) {
|
||||||
return <PlaceholderCell />
|
return <PlaceholderCell />
|
||||||
}
|
}
|
||||||
|
|
||||||
const value = new Date(date)
|
|
||||||
value.setMinutes(value.getMinutes() - value.getTimezoneOffset())
|
|
||||||
|
|
||||||
const hour12 = Intl.DateTimeFormat().resolvedOptions().hour12
|
|
||||||
const timestampFormat = hour12 ? "dd MMM yyyy hh:MM a" : "dd MMM yyyy HH:MM"
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex h-full w-full items-center overflow-hidden">
|
<div className="flex h-full w-full items-center overflow-hidden">
|
||||||
<Tooltip
|
<Tooltip
|
||||||
className="z-10"
|
className="z-10"
|
||||||
content={
|
content={
|
||||||
<span className="text-pretty">{`${format(
|
<span className="text-pretty">{`${getFullDate({
|
||||||
value,
|
date,
|
||||||
timestampFormat
|
includeTime: true,
|
||||||
)}`}</span>
|
})}`}</span>
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<span className="truncate">{format(value, "dd MMM yyyy")}</span>
|
<span className="truncate">
|
||||||
|
{getFullDate({ date, includeTime: false })}
|
||||||
|
</span>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|||||||
Reference in New Issue
Block a user