DateTimePicker
Represents a control that allows the user to select or type a date and a time.
The DateTimePicker control is used to allow the user to select a date and time, and to display that date and time in the specified format. The DateTimePicker control makes it easy to work with dates and times because it handles a lot of the data validation automatically.
When used to represent a date, the DateTimePicker control appears in two parts: a drop-down list with a date represented in text, and a calendar that appears when you click the down-arrow next to the list. The calendar looks like the MonthCalendar control, which can be used for selecting multiple dates.
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 the date and time including Long, Short, Time, DateTime, and an option for configuring a custom format.
Labels
The DateTimePicker control supports the inline Label property. This allows an application to set a label in relation to a DateTimePicker control without having to create an additional Label control.
Validation
It's easy to add validation to the DateTimePicker. Simply specify the format and the InvalidMessage property and you'll get a result like the following when a user types an invalid input:
The Mask property can also be set to provide a custom format for input.
How To
Customize the Appearance
There are several ways to customize the appearance of a DateTimePicker: use the available properties, customize the theme, or adding custom styles.
The properties that can change the appearance of a DateTimePicker (and most controls) are usually limited to BackColor, ForeColor, BorderStyle, and Font properties.
If you need to achieve some very special UI design, like the Material-3 animated underline when the TextBox gains the focus, you will have to either create a custom theme, or a theme mixin or add custom styles to the control.
You can see in the video above a DateTimePicker with "border-radius:10px" assigned to the CssStyle property. To apply a shared style, set the CssClass property instead and add a StyleSheet file (.css) to the application either in Default.html or using 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 |
Last updated
