# 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](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-f818cc676eeb66df08ceb9afbf1b2ef946b33b7b%2Fimage.png?alt=media)

### Labels

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

![DateTimePicker with label](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-227e188cf4c27185d25091fd488e158431665b8b%2Fimage.png?alt=media)

{% content-ref url="../general/labels" %}
[labels](https://docs.wisej.com/docs/controls/general/labels)
{% endcontent-ref %}

### Validation

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

![DateTimePicker validation message](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-f9a01dff10c6de4e65702bf976069f6c98618e2c%2Fimage.png?alt=media)

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

![DateTimePicker with custom mask](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-6730371fecbfeee3a3798175f0044f6c33906aa4%2Fimage.png?alt=media)

## 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.](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-82494f62b0c25e6e09a344855f6ae154ffb748f9%2FSimpleDateTimePickerAnimation.gif?alt=media)

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](https://docs.wisej.com/docs/controls/extenders/stylesheet) extender.

{% hint style="info" %}
The video also features a simple "tada" animation using the [Animation](https://docs.wisej.com/docs/controls/extenders/animation) 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](https://docs.wisej.com/docs/controls/general/embedded-tools).                                                                                                                                                                                                                           |
| Source code         | [https://github.com/iceteagroup/wisej-js](https://github.com/iceteagroup/wisej-js/blob/master/wisej.web.TextBox.js)                                                                                                                                                                                                    |