DateTimePicker

Represents a control that allows the user to select or type a date and a time.

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.

For a full list of properties, methods and events see the API documentation.

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

Labels

The DateTimePicker control supports the inline Label property. This allows setting a label in relation to a DateTimePicker control without creating an additional Label control.

DateTimePicker with label

Labels

Validation

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

DateTimePicker validation message

The Mask property can provide a custom input format:

DateTimePicker with custom mask

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, use a theme mixin, or add custom styles to the control.

Customized DateTimePicker control.

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

The video also features a simple "tada" animation using the Animation component.

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.
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.
Source code	https://github.com/iceteagroup/wisej-js