The DatePicker control allows users to select a date and time by typing the date and time in a textbox, or using the drop-down calendar control.
1 2 3 4 5
[TemplatePart(Name = ElementRoot, Type = typeof(Grid))] [TemplatePart(Name = ElementTextBox, Type = typeof(WatermarkTextBox))] [TemplatePart(Name = ElementButton, Type = typeof(Button))] [TemplatePart(Name = ElementPopup, Type = typeof(Popup))] publicclassDateTimePicker : Control, IDataInput
Create DateTimePicker
1
<hc:DateTimePicker />
1
var dateTimePicker = new DateTimePicker();
The generated DateTimePicker is shown below:
Select date and time
You can enter the date and time through the textbox, or click the button to the right of the text box to open the drop-down calendar and clock controls to select the date and time.
You can also set the date like this in XAML or code.
You can add Headers and Placeholders to the DatePicker to indicate to the user what they do. To use these two properties, you first need to apply the DateTimePickerExtend or DateTimePickerPlus styles.
1 2 3 4
<hc:DateTimePickerShowClearButton="True" Style="{StaticResource DateTimePickerExtend}" hc:InfoElement.Title="This is the title" hc:InfoElement.Placeholder="Please enter the content"/>
Styles
Available Styles
DateTimePicker.Small
DateTimePickerExtend
DateTimePickerExtend.Small
DateTimePickerPlus
DateTimePickerPlus.Small
Attributes
Property
Description
SelectedDateTime
Get or set the currently selected date and time
DateTimeFormat
Gets or sets the format used to display the selected date and time
CalendarStyle
Gets or sets the style used when rendering the calendar
DisplayDateTime
Get or set the date to be displayed
IsDropDownOpen
Gets or sets a value indicating whether the drop-down is on or off Calendar
Text
Get the text displayed by DateTimePicker, or set the selected date and time