DateTimePicker
Represents a control that allows the user to select or type a date and a time.
Last updated
Was this helpful?
Represents a control that allows the user to select or type a date and a time.
Last updated
Was this helpful?
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.
The DateTimePicker offers several preset formats for displaying date and time including Long, Short, Time, DateTime, and custom format configuration.
Add validation to the DateTimePicker by specifying the format and InvalidMessage property for handling invalid user input:
The Mask property can provide a custom input format:
Customize the DateTimePicker appearance through properties, theme customization, or custom styles.
The appearance properties include BackColor, ForeColor, BorderStyle, and Font.
Class name
"wisej.web.DateTimePicker" or "wisej.web.dateTimePicker.DropDown" for the drop down component.
Theme appearance
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
Source code
The DateTimePicker control supports the inline property. This allows setting a label in relation to a DateTimePicker control without creating an additional Label control.
For specialized UI designs like Material-3 animated underline on focus, either create a custom , use a theme mixin, or add custom styles to the 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 extender.
The video also features a simple "tada" animation using the component.
"datefield", see .
"editor", see .
