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

# DateTimePickerElement

> DateTimePickerElement — CometChat documentation.

The DateTimePickerElement class is used to create a Date Picker element in a user interface.

### Constructor

| Name           | Type                           | Description                                                 |
| -------------- | ------------------------------ | ----------------------------------------------------------- |
| elementId      | `string`                       | This property in constructor accepts the Id for the element |
| label          | `string`                       | This property in constructor accepts the label for dropDown |
| mode           | `enum<DateTimePickerMode>\n\n` | It is the mode of the date time picker.                     |
| from           | `string`                       | It is the start date of the date time picker.               |
| to             | `string`                       | It is the end date of the date time picker.                 |
| timezoneCode   | `string`                       | It is the time zone of the given date.                      |
| dateTimeFormat | `string`                       | It is the format of the date time picker.                   |

### Class Usage

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

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    const dateTimePickerElement = new DateTimePickerElement(
      "1",
      "Select Date",
      DateTimePickerMode.date,
      "UTC",
      true
    );
    ```
  </Tab>
</Tabs>

### Example

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

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    // Create a new instance of DropdownElement

    const dateTimePickerElement = new DateTimePickerElement(
      "1",
      "Select Date",
      DateTimePickerMode.dateTime,
      "UTC",
      true
    );

    // Set and get the default value

    dateTimePickerElement.setDefaultValue("2021-12-12T12:12");
    dateTimePickerElement.setFrom("2021-12-12T12:12");
    dateTimePickerElement.setTo("2021-12-12T12:12");
    dateTimePickerElement.setDateTimeFormat("yyyy-MM-ddTHH:mm");
    ```
  </Tab>
</Tabs>