Times

A utility component for displaying or selecting times, often used in time pickers or schedule-based inputs.

Usage

Basic usage example to quickly see how the Times works.

Posted: 5 years, 6 months, 13 days agoUpdated: 1 years, 3 months, 10 days agoInterval: 1553 days

"use client";
import { Times } from "@/ui/times";

export function TimesDemo() {
  return <Times.Posted withInterval diff="long" times={{ createdAt: new Date("2019-11-22T16:30"), updatedAt: new Date("2024-02-22T16:30") }} />;
}

Properties

Interactive configurator to explore customization options for the Times component.

22 November 2019

Posted: 22 Nov 19Updated: 22 Feb 24Interval: 1553 days

Time

Diff

API References

Styles API

<TimesPosted />

type T = "root" | "createdAt" | "updatedAt" | "interval";

Styles API	Type	Default	Annotation
unstyled`?`	`Partial<Record<T, boolean>>`	`false`	if `true`, default styles will be removed
className`?`	`string`	`undefined`	pass to root component `<div>`
classNames`?`	`Partial<Record<T, string>>`	`undefined`
style`?`	`CSSProperties`	`undefined`	pass to root component `<div>`
styles`?`	`Partial<Record<T, CSSProperties>>`	`undefined`

Props API

<Times />

Props API	Type	Default
time`?`	`string \| Date;`	`undefined`
diff`?`	`Format["diff"]`	`short`
locales`?`	`Format["locales"]`	`en-US`

<TimesPosted />

Props API	Type	Default
`?`	``	``
diff`?`	`Format["diff"]`	`short`
locales`?`	`Format["locales"]`	`en-US`
withInterval`?`	`boolean`	`false`
times`?`	`{ createdAt?: string \| Date; updatedAt?: string \| Date }`	`undefined`

Source Codes

Full working code example, including necessary markup and styles. You can copy and paste this code directly to start using the component immediately.

times.tsx