> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Date

> Date — CometChat documentation.

`CometChatDate` is a widget which is used to show the date and time. You can also customize the appearance of this widget by modifying its logic.

## Properties

| Name             | Type                                         | Description                                                                    |
| ---------------- | -------------------------------------------- | ------------------------------------------------------------------------------ |
| timestamp        | number                                       | Timestamp to be displayed in unix format                                       |
| pattern          | [DatePatterns](/web-shared/datepatterns)     | Group of constants representing the in-built date patterns                     |
| customDateString | string                                       | Override the in-built pattern with your custom representation of the timestamp |
| dateStyle        | [dateStyle](/ui-kit/react/v4/date#datestyle) | Styling properties and values of the [Date](/ui-kit/react/v4/date) component   |

## dateStyle

Styling properties and values of the element

| Name         | Description                                                                                                                                                                          |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| width        | Sets the width of the element                                                                                                                                                        |
| height       | Sets the height of the element                                                                                                                                                       |
| border       | Sets the border of the element                                                                                                                                                       |
| borderRadius | Sets the border radius of the element                                                                                                                                                |
| background   | Sets all background style properties at once, such as color, image, origin and size, or repeat method. [Reference link](https://developer.mozilla.org/en-US/docs/Web/CSS/background) |
| textFont     | Sets all the different properties of font for the date text. [Reference link](https://developer.mozilla.org/en-US/docs/Web/CSS/font)                                                 |
| textColor    | Sets the foreground color of the date text.                                                                                                                                          |

## Usage

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}
    import '@cometchat/uikit-elements'; //import the web elements package.
    import { DatePatterns } from 'uikit-resources'; //import the date pattern constant.

    //make use of the element; format the timestamp to the in-built time pattern
    <cometchat-date timestamp="1686234301" pattern={DatePatterns.time}></cometchat-date>
    ```
  </Tab>
</Tabs>