DateDetails
DateDetails displays a human-readable relative timestamp that expands to show exact dates in various time-zones. It’s perfect for showing “2 hours ago” or “3 days ago” with detailed information on hover.
Example
a few seconds ago
Props
Prop | Type | Default value | Description |
|---|---|---|---|
Prop date | Type Date | Default value — | Description The date object to display |
Prop side | Type 'top' | 'right' | 'bottom' | 'left' | Default value 'top' | Description The side where the tooltip with detailed date information appears |
Prop systemTimeZone | Type string | Default value undefined | Description The system timezone to use for displaying the date |
Quick Start
import { DateDetails } from '@clickhouse/click-ui'
function MyDateDetails() {
const date = new Date()
return (
<DateDetails date={date} side="top" />
)
}Related Components
- DatePicker: For selecting dates instead of displaying them.
- Text: Often displayed alongside date details.
- Tooltip: Used internally to show detailed date information.
Common Use Cases
Relative Time
Last updated:
2 hours ago
import { DateDetails, Text, Container } from '@clickhouse/click-ui'
function RelativeTime() {
const date = new Date(Date.now() - 2 * 60 * 60 * 1000) // 2 hours ago
return (
<Container orientation='vertical' gap='sm'>
<Text>Last updated:</Text>
<DateDetails date={date} />
</Container>
)
}Timestamp Display
Created:
a few seconds ago
import { DateDetails, Text, Container } from '@clickhouse/click-ui'
function TimestampDisplay() {
const timestamp = new Date()
return (
<Container orientation='horizontal' gap='sm' alignItems='center'>
<Text>Created:</Text>
<DateDetails date={timestamp} side="bottom" />
</Container>
)
}