DurationField

Displays an ISO-8601 duration string (PT2H30M) as 2h 30m or 2 hours 30 minutes.

Installation

pnpm dlx shadcn@latest add @shadmin/duration-field

Usage

import { DurationField } from '@/components/admin';
 
<DurationField source="duration" />
<DurationField source="duration" displayFormat="relative" />
<DurationField source="duration" empty="—" />

Props

PropRequiredTypeDefaultDescription
sourceRequiredstring-Record field to read
displayFormatOptional"compact" | "relative""compact"Render style
emptyOptionalReactNode-Fallback when value is null
classNameOptionalstring-CSS class on <span>

Storage format

ISO-8601 duration strings: PT2H30M (2 hours 30 minutes), P1DT4H (1 day 4 hours), PT45M (45 minutes). Unparseable strings render nothing.