Universal Windows Apps 8.1 DatePicker and TimePicker setting default string - xaml

Question

DatePicker and TimePicker in UWA 8.1 for Windows Store and Windows Phone (WinRT) by default it shows today date and the current time, whereas I want to set initially both the controls to some default string let's say "Set Due Date/Time" because they're optional.
I am binding them to the following properties using MVVM pattern and MVVM light libraries only
public DateTimeOffset? DueDate { get; set; }
public TimeSpan? DueTime { get; set; }
I've tried in the following way, please suggest any solution.
I have used two converters but there is a problem.
When I click the button that says "Set Due Date" and then click the tick mark in the DatePicker popup screen without changing date, month or year then the converter doesn't fire, when I make a change to date, month or year then it fires, I see that even if the property bound is a nullable DateTimeOffset the DatePicker in XAML shows Date value to current date, also IsHitTestVisible="False" removes the tilt effect which is nice to have, because the button can't be clicked anymore, but the tilt effect is not a must have option for me
<Page
x:Class="UWP.MVVM.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UWP.MVVM"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:vm="using:UWP.MVVM.ViewModels"
xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
xmlns:core="using:Microsoft.Xaml.Interactions.Core"
xmlns:converters="using:UWP.MVVM.Converters"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Page.Resources>
<converters:DateTimeOffsetToVisibilityConverter x:Key="DateTimeOffsetToVisibilityConverter"/>
<converters:DateTimeOffsetToOpacityConverter x:Key="DateTimeOffsetToOpacityConverter"/>
</Page.Resources>
<Grid Margin="24,24">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBox Header="First Name"
Text="{Binding Person.FirstName}"/>
<DatePicker Name="DateOfBirth"
Date="{Binding Person.DateOfBirth, Mode=TwoWay}"
Grid.Row="1"
Opacity="{Binding Person.DateOfBirth, Converter={StaticResource DateTimeOffsetToOpacityConverter}}"/>
<Button Grid.Row="1"
Content="Set Due Date"
IsHitTestVisible="False"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
HorizontalContentAlignment="Left"
Visibility="{Binding Person.DateOfBirth, Converter={StaticResource DateTimeOffsetToVisibilityConverter}}"/>
</Grid>
</Page>
namespace UWP.MVVM.Converters
{
using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Data;
public class DateTimeOffsetToVisibilityConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
if (value == null)
{
return Visibility.Visible;
}
else
{
return Visibility.Collapsed;
}
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
if (value == Visibility.Visible)
{
return null;
}
else
{
return DateTimeOffset.Now;
}
}
}
}
namespace UWP.MVVM.Converters
{
using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Data;
public class DateTimeOffsetToOpacityConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
if (value == null)
{
return 0D;
}
else
{
return 1D;
}
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
if (value == 0D)
{
return null;
}
else
{
return DateTimeOffset.Now;
}
}
}
}

Answer 1

You can put a textblock on the datepicker, with your desired text.
Set the visibility of textblock depending upon the value of your DueDate/DueTime properties,using a converter(if its null return visible else return collapsed).