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.
Features
Custom Date Formats
The DateTimePicker offers several preset formats for displaying date and time including Long, Short, Time, DateTime, and custom format configuration.
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.
Validation
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:
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.
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.
Advanced
JavaScript Widget
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
Last updated
Was this helpful?