Visual Structure

The DateTimePicker uses a set of visual elements when rendered.

Displayed Elements

  • Placeholder—The text that is visualized before picking a date/time. You can customize the placeholder through the PlaceholderTemplate property.
  • DisplayStringFormat—The text that is visualized after a date/time is picked.
  • Header—The text that is displayed in the popup header. You can set it to a text input through the HeaderLabelText property, or fully customize it by using the HeaderTemplate property.
  • SpinnerHeader—The text that is visualized for the spinner header depending on the values that are picked. For example, if the SpinnerFormatString is d, and AreSpinnerHeadersVisible property is set to True the visualized text for the spinner header will be Month Day Year.
  • Spinner—Displays items in a list.
  • SelectionHighlight—Highlights the current selected date when the popup is open.
  • Footer—The footer of the popup. By default, it contains the OK and Cancel buttons. You can customize it through the FooterTemplate property.

DateTimePicker Structure

The following image shows the structure of the DateTimePicker before and after a date/time is selected.

DateTimePicker Visual Structure

The following images show the visual structure of the DateTimePicker popup.

DateTimePicker Popup Visual Structure

The following images show the visual structure of the DateTimePicker dropdown.

DateTimePicker Popup Visual Structure

In this article
Not finding the help you need?