> ## 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.

## How to integrate CometChatDate ?

Since `CometChatDate` is a widget, it can be added directly in the build method. `CometChatDate` includes various parameters to customize its UI.

#### Usage

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatDate(
        date: DateTime.now(),
    );
    ```
  </Tab>
</Tabs>

***

## Properties

| Parameters           | Type                                           | Description                                                                            |
| -------------------- | ---------------------------------------------- | -------------------------------------------------------------------------------------- |
| **date**             | DateTime                                       | Used to set the date                                                                   |
| **pattern**          | DateTimePattern                                | Used to set pattern with different logics timeFormat, dayDateFormat, dayDateTimeFormat |
| **customDateString** | String                                         | text to show instead of date from DateTime object                                      |
| **style**            | [DateStyle](/ui-kit/flutter/v4/date#datestyle) | used to customize the appearance of this widget                                        |

***

## DateStyle

| Parameters                  | Type               | Description                              |
| --------------------------- | ------------------ | ---------------------------------------- |
| **textStyle**               | TextStyle          | Used to set text style of date component |
| **background**              | Color              | Used to set the background color         |
| **border**                  | BoxBorder          | used to set border                       |
| **borderRadius**            | double             | used to set the border radius            |
| **height**                  | double             | used to set the height                   |
| **width**                   | double             | used to set width                        |
| **gradient**                | Gradient           | used to set a gradient background        |
| **isTransparentBackground** | bool               | Used to set background transparent       |
| **contentPadding**          | EdgeInsetsGeometry | Used to set content padding              |

***

### Usage

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatDate(
        date: DateTime.now(),
        style: DateStyle(
            backgroundColor: Colors.yellow,
        )
    );
    ```
  </Tab>
</Tabs>