> ## 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 Time Picker Element

> Date Time Picker Element — CometChat documentation.

`DateTimeElement` is used to represent a single input field that allows to select date and time.

### Properties:

| Property              | Type                   | Description                                        |
| --------------------- | ---------------------- | -------------------------------------------------- |
| **elementType**       | String                 | defaults to UIElementTypeConstants.dropdown        |
| **elementId**         | String                 | unique ID for the interaction element              |
| **label**             | String                 | accepts a string. It is the label of the dropdown. |
| **mode**              | DateTimeVisibilityMode | It is the mode of the date time picker.            |
| **from**              | DateTime               | It is the start date of the date time picker.      |
| **to**                | DateTime               | It is the end date of the date time picker.        |
| **placeholder**       | TextInputPlaceholder   | It is the placeholder of the date time picker.     |
| **formattedResponse** | DateTime               | the default value of the date time element.        |
| **dateTimeFormat**    | String                 | It is the format of the date time picker.          |
| **response**          | String                 | It is the response of the input element.           |
| **defaultValue**      | String                 | It is the default value of the input element.      |
| **optional**          | bool                   | It states if the input element is optional.        |

***

### Usage

Here's an example of how you can create an instance of the `DateTimeElement` class:

In this example, a new instance of `DateTimeElement` is created with the elementId "1" and the label text "Select a Date".

***

### Example

Here is an example that showcases the creation and manipulation of an instance of `DateTimeElement`:

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    DateTimeElement(elementId: "1", label: "Select a Date", formattedResponse: DateTime.now(),)
    ```
  </Tab>
</Tabs>