Changing the watermark text in a DatePicker control

Someone recently asked about how to change the watermark text in a DatePicker control. Here’s a picture of the DatePicker control. I’ve drawn an arrow to the watermark text.

watermark

Unfortunately, changing the watermark text is not as easy to do as you might think, and I can only change it the first time it displays. 

The DatePicker control has a template part of type DatePickerTextBox that exposes a Watermark property. You'll see this part declared in the class overview topic of the DatePicker control:

[TemplatePartAttribute(Name = "TextBox", Type = typeof(DatePickerTextBox))]

There are multiple ways to tackle this problem, but one of the easiest ways I see to do it is to derive from DatePicker and override OnApplyTemplate. You can then retrieve the TextBox part and set the watermark.

using System.Windows.Controls.Primitives;

 

public class MyDatePicker : DatePicker
{
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
DatePickerTextBox box = base.GetTemplateChild("TextBox") as DatePickerTextBox;
box.Watermark = "Type or select a date --> ";
}
}

If you go this route, keep in mind that the default implementation of the watermark text adjusts depending on the whether the selected date format is long or short. If you override the watermark you might want to take this in consideration as the user will lose an important hint about the expected format of the date.

One way to deal with this is to retrieve the selected date format and use it when you set the watermark. (I have to point out that this example requires a very wide date picker, which is not ideal, but you get the idea):

 public class MyDatePicker : DatePicker
{
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
DatePickerTextBox box = base.GetTemplateChild("TextBox") as DatePickerTextBox;

           string formatString = "";
if (this.SelectedDateFormat == DatePickerFormat.Short)
formatString = "mm/d/yy";
if (this.SelectedDateFormat == DatePickerFormat.Long)
formatString = "dddd, MMMM, dd, yyyy";
box.Watermark = "Type ( " + formatString + ") or select a date --> ";
}
}

 

 

Here’s how my page XAML looks:

 

<UserControl x:Class="DatePickerWatermark.MainPage"
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="https://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local ="clr-namespace:DatePickerWatermark"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">

<Grid x:Name="LayoutRoot" Background="White">
<local:MyDatePicker Width="240" Height="40" />
</Grid>
</UserControl>

 

 

And here is how it looks how I run it:

watermarkCuston

 I hope this helps.

--Cheryl