# DateTimePicker

The Wisej.NET `DateTimePicker` control enables users to select a date and time, displaying them in the specified format. The `DateTimePicker` control simplifies date and time handling by managing data validation automatically.

When representing a date, the `DateTimePicker` control displays two parts: a drop-down list with a date in text format, and a calendar that appears when clicking the down-arrow. The calendar resembles the `MonthCalendar` control, which supports multiple date selection.

{% hint style="info" %}
For a full list of properties, methods and events see the [API documentation.](http://docs.wisej.com/api)
{% endhint %}

## Features

### Custom Date Formats

The `DateTimePicker` offers several preset formats for displaying date and time including `Long`, `Short`, `Time`, `DateTime`, and custom format configuration.

![DateTimePicker format options](/files/-Mcp30uxIbs8Cy2ppO_t)

### Labels

The `DateTimePicker` control supports the inline [Label](/docs/controls/general/labels.md) property. This allows setting a label in relation to a `DateTimePicker` control without creating an additional `Label` control.

![DateTimePicker with label](/files/-Mcp4Q-D_uyFyVkt1Mda)

{% content-ref url="/pages/-MIuBO1zCPpT0Jut8LQd" %}
[Labels](/docs/controls/general/labels.md)
{% endcontent-ref %}

### Validation

Add validation to the `DateTimePicker` by specifying the format and `InvalidMessage` property for handling invalid user input:

![DateTimePicker validation message](/files/-McpTCz8b46iKkcp6DoK)

The `Mask` property can provide a custom input format:

![DateTimePicker with custom mask](/files/-McpVWZvR4LcuKhAR7Vd)

## How To

### Customize the Appearance

Customize the `DateTimePicker` appearance through properties, theme customization, or custom styles.

The appearance properties include `BackColor`, `ForeColor`, `BorderStyle`, and `Font`.

For specialized UI designs like Material-3 animated underline on focus, either create a custom [theme](https://docs.wisej.com/theme-builder/theme-elements/appearances), use a theme mixin, or add custom styles to the control.

![Customized DateTimePicker control.](/files/-McpPLM7APznQBiTrU1i)

The video shows a `DateTimePicker` with "border-radius:10px" assigned to the `CssStyle` property. For shared styles, set the `CssClass` property and add a StyleSheet file (.css) to the application through Default.html or the [StyleSheet](/docs/controls/extenders/stylesheet.md) extender.

{% hint style="info" %}
The video also features a simple "tada" animation using the [Animation](/docs/controls/extenders/animation.md) component.
{% endhint %}

## Advanced

### JavaScript Widget

| Item                | Description                                                                                                                                                                                                                                                                                                            |
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Class name          | "wisej.web.DateTimePicker" or "wisej.web.dateTimePicker.DropDown" for the drop down component.                                                                                                                                                                                                                         |
| Theme appearance    | "datefield", see [Themes](https://docs.wisej.com/theme-builder/theme-elements/elements).                                                                                                                                                                                                                               |
| Child components    | "textfield" is the inner \<input> widget. "button" is the button that shows the dropdown. "list" is the list of dates in the popup. "popup" is the popup frame (background). "checkbox" is the checkbox, when enabled. "upbutton" is the up button, when applicable. "downbutton" is the down button, when applicable. |
| Toolcontainer state | "editor", see [Embedded Tools](/docs/controls/general/embedded-tools.md).                                                                                                                                                                                                                                              |
| Source code         | [https://github.com/iceteagroup/wisej-js](https://github.com/iceteagroup/wisej-js/blob/master/wisej.web.TextBox.js)                                                                                                                                                                                                    |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.wisej.com/docs/controls/editors/datetimepicker.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.