---
title: Date details
description: DateDetails shows a relative time and reveals formatted timestamps on hover.
category: Data
related: [DatePicker, Text, Tooltip]
commonPatterns: [relative-time, timestamp-display]
---

Source: https://clickhouse.design/click-ui/datedetails

# Date details

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

## Props

| Prop           | Type                                     | Default value | Description                                                       |
| -------------- | ---------------------------------------- | ------------- | ----------------------------------------------------------------- |
| date           | `Date`                                   | `—`           | The date object to display                                        |
| side           | `'top' \| 'right' \| 'bottom' \| 'left'` | `'top'`       | The side where the tooltip with detailed date information appears |
| systemTimeZone | `string`                                 | `undefined`   | The system timezone to use for displaying the date                |

```tsx
import { DateDetails } from '@clickhouse/click-ui'

function MyDateDetails() {
return <DateDetails date={new Date()} side="top" />
}
```

## Quick start

```tsx
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

```tsx
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

```tsx
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>
)
}
```