Visual Structure

The DatePicker 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, 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.

DatePicker Structure

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

DatePicker Visual Structure

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

DatePicker Popup Visual Structure

In this article
Not finding the help you need?