> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-llms-scoped-indexes.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>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.