# DateSeparator

A simple date separator component rendered between messages. It’s injected by `VirtualizedMessageList` and `MessageList`. See the render method
[processMessages](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/utils.ts) for more info on the conditions for when the component is injected into the UI.

## Best Practices

- Use the default separator unless you need a brand-specific format.
- Keep custom separators lightweight to avoid list rendering overhead.
- Disable separators only if your UX provides another temporal cue.
- Match `formatDate` with your locale and time format strategy.
- Test separators in long histories and across time zones.

## Basic Usage

Since it’s injected by default, you usually don’t need to import it unless you’re building a custom date separator.
To disable it, use `disableDateSeparator` on `VirtualizedMessageList` or `MessageList`.
You can also hide the “new messages” separator via `hideNewMessageSeparator`.

**Example 1** - Today’s date:

```tsx
const date = new Date();

<DateSeparator date={date} />;
```

**Example 2** - A past date:

```tsx
const date = new Date("December 17, 1995 03:24:00");

<React.Fragment>
  <DateSeparator date={date} />
  <DateSeparator date={date} position="center" />
  <DateSeparator date={date} position="left" />
</React.Fragment>;
```

## UI Customization

Override it via the `DateSeparator` prop on `Channel`, which injects the component into `ComponentContext` for list rendering.

**Example 1** - An example of a custom date separator:

```tsx
export const YourCustomDateSeparator = (props: DateSeparatorProps) => {
    const { date } = props

    function formatDate(d: Date) {
        return `The message date is: ${d.toDateString()}`;
    }

    return (
        <DateSeparator
            formatDate={formatDate}
            date={date}
            position={'center'}
        />
    )
};

<Channel DateSeparator={YourCustomDateSeparator}>
    // the Channel children components
/>
```

## Props

### date

The date to format, required.

| Type |
| ---- |
| Date |

### formatDate

Function to override the default formatting of the date. Has access to the original date object.

| Type                   |
| ---------------------- |
| (date: Date) => string |

### position

Set the position of the date in the separator.

| Type                          | Default |
| ----------------------------- | ------- |
| 'left' \| 'center' \| 'right' | 'right' |

### unread

Whether the following messages are unread.

| Type    |
| ------- |
| boolean |


---

This page was last updated at 2026-04-21T07:55:47.325Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/v13/components/utility-components/date_separator/](https://getstream.io/chat/docs/sdk/react/v13/components/utility-components/date_separator/).