WPF DatePicker format

Question

I got this sample code from this forum.

<DatePicker SelectedDate="{Binding myVideModelProperty}"
                Height="25" HorizontalAlignment="Left" Margin="81,-2,0,0" Name="myDatePicker" VerticalAlignment="Top" Width="115">
        <DatePicker.Resources>
            <Style TargetType="{x:Type DatePickerTextBox}">
                <Setter Property="Control.Template">
                    <Setter.Value>
                        <ControlTemplate>
                            <TextBox x:Name="PART_TextBox" 
                                Text="{Binding Path=SelectedDate, RelativeSource={RelativeSource AncestorType={x:Type DatePicker}}, StringFormat={}{0:yyyy/MM/dd}}" />
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </DatePicker.Resources>
    </DatePicker>

But I want the format i.e yyyy/MM/dd to come from an application property called dateformat. Can you help me put the stringformat as a binding to the application property.

Ideal

Answer 1

All of the other answers seem a little bit convoluted. It is as simple as:

<DatePicker SelectedDate="{Binding PropertyName, StringFormat=dd/MM/yyyy}"/>

All you need to do is adjust the string format to suit yourself.

Gonfanon

FINALLY, this is the correct answer! I wish I could upvote you more than once. I've been searching for too long to get this right, and I finally find the right answer with zero upvotes at the bottom this hidden post ... – Comprise

...although now I have encountered a different problem related to this solution. For those that might be interested: https://mcmap.net/q/1162760/-datepickertextbox-switching-day-and-month/831138 – Comprise

Maybe it can work when binding is String, but doesn't work when is DateTime – Loxodromic

Answer 2

Use this snippet for your DatePicker (you will have to style it):

    <DatePicker SelectedDate="{Binding myVideModelProperty}">
        <DatePicker.Resources>
            <Style TargetType="{x:Type DatePickerTextBox}">
                <Setter Property="Control.Template">
                    <Setter.Value>
                        <ControlTemplate>
                            <TextBox x:Name="PART_TextBox"
                                     Text="{Binding Path=SelectedDate, 
                                            RelativeSource={RelativeSource AncestorType={x:Type DatePicker}}, 
                                            StringFormat={x:Static local:App.DateFormat}}" />
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </DatePicker.Resources>
    </DatePicker>

Use this snippet for your App.xaml.cs (change the namespace to something useful):

namespace _24417730
{
    public partial class App
    {
        public static string DateFormat = "yyyy/MM/dd";
    }
}

In the xaml control containing your DatePicker, define a XAML namespace like so: xmlns:local="clr-namespace:_24417730"

Note that you will have to change the namespace to the one you used to define your application class.

Here is how I defined my xaml namespace on the MainWindow.xaml control:

<Window x:Class="_24417730.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:_24417730"
        Title="MainWindow" Height="350" Width="525">
    <StackPanel>
        <DatePicker SelectedDate="{Binding myVideModelProperty}">
            <DatePicker.Resources>
                <Style TargetType="{x:Type DatePickerTextBox}">
                    <Setter Property="Control.Template">
                        <Setter.Value>
                            <ControlTemplate>
                                <TextBox x:Name="PART_TextBox"
                                                 Text="{Binding Path=SelectedDate, 
                                                        RelativeSource={RelativeSource AncestorType={x:Type DatePicker}}, 
                                                        StringFormat={x:Static local:App.DateFormat}}" />
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </DatePicker.Resources>
        </DatePicker>
    </StackPanel>
</Window>

Also, reading up on Static Markup Extension and XAML Namespaces may help for future reference.

If you require any further clarifications, I will be happy to assist.

Jena

It is defined as Static Property in Application.xaml.vb – Ideal

Any of the answers on this page should address your problem. If you need clearer instruction, let me know and I will revise my initial answer with a more complete applicable example. – Jena

I am working on WPF for the first time. I got the error - ** Cannot find the type 'Application'. Note that type names are case sensitive. ** I have defined local like this. xmlns:local="clr-namespace:BillingApp" BillingApp is the root assembly namespace. Application.xaml.vb doesn't have any namespace defined in it. – Ideal

I have added additional clarification on how to define and consume XAML namespaces. Hopefully, this should resolve your issue. – Jena

I added like this - Namespace BillingApp.Common Partial Class Application and I got error that Event 'Exit' cannot be found. I have some code written in the application.exit – Ideal

It is likely that your DataContext isn't set in the Application.xaml. If you post the xaml portion of your code setting the binding to the exit event and tell me which file it is in, I can likely give you the solution. – Jena

This is my method is application.xaml.vb. I don't have any binding to this exit event which I have written. Private Sub Application_Exit(sender As Object, e As System.Windows.ExitEventArgs) Handles Me.Exit 'some logic here End Sub – Ideal

It appears that the problem you are describing is an entirely different issue than the original problem described in this post. If you post a new question with the details about how/when you are invoking this event, I will be happy to help. Just post a link to the new question here, or send me a message with the link. – Jena

Answer 3

You can use converters for that. Or you can add another property to your class which will return the formatted date.

With converter

public class DateFormatConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return string.Format(Application.DateFormat, value);
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
    }
}

Pupillary

Answer 4

<Style TargetType="{x:Type DatePicker}">
    <Setter Property="Foreground" Value="#FF333333"/>
    <Setter Property="IsTodayHighlighted" Value="True"/>
    <Setter Property="SelectedDateFormat" Value="Short"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Padding" Value="2"/>
    <Setter Property="BorderBrush">
        <Setter.Value>
            <LinearGradientBrush EndPoint=".5,0" StartPoint=".5,1">
                <GradientStop Color="#FFA3AEB9" Offset="0"/>
                <GradientStop Color="#FF8399A9" Offset="0.375"/>
                <GradientStop Color="#FF718597" Offset="0.375"/>
                <GradientStop Color="#FF617584" Offset="1"/>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type DatePicker}">
                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_DisabledVisual"/>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Grid x:Name="PART_Root" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                        <Grid.Resources>
                            <SolidColorBrush x:Key="DisabledBrush" Color="#A5FFFFFF"/>
                            <ControlTemplate x:Key="DropDownButtonTemplate" TargetType="{x:Type Button}">
                                <Grid>
                                    <VisualStateManager.VisualStateGroups>
                                        <VisualStateGroup x:Name="CommonStates">
                                            <VisualStateGroup.Transitions>
                                                <VisualTransition GeneratedDuration="0"/>
                                                <VisualTransition GeneratedDuration="0:0:0.1" To="MouseOver"/>
                                                <VisualTransition GeneratedDuration="0:0:0.1" To="Pressed"/>
                                            </VisualStateGroup.Transitions>
                                            <VisualState x:Name="Normal"/>
                                            <VisualState x:Name="MouseOver">
                                                <Storyboard>
                                                    <ColorAnimation Duration="0" To="#FF448DCA" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Background"/>
                                                    <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient">
                                                        <SplineColorKeyFrame KeyTime="0" Value="#7FFFFFFF"/>
                                                    </ColorAnimationUsingKeyFrames>
                                                    <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient">
                                                        <SplineColorKeyFrame KeyTime="0" Value="#CCFFFFFF"/>
                                                    </ColorAnimationUsingKeyFrames>
                                                    <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient">
                                                        <SplineColorKeyFrame KeyTime="0" Value="#F2FFFFFF"/>
                                                    </ColorAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="Pressed">
                                                <Storyboard>
                                                    <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Background">
                                                        <SplineColorKeyFrame KeyTime="0" Value="#FF448DCA"/>
                                                    </ColorAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Highlight">
                                                        <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient">
                                                        <SplineColorKeyFrame KeyTime="0" Value="#EAFFFFFF"/>
                                                    </ColorAnimationUsingKeyFrames>
                                                    <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient">
                                                        <SplineColorKeyFrame KeyTime="0" Value="#C6FFFFFF"/>
                                                    </ColorAnimationUsingKeyFrames>
                                                    <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient">
                                                        <SplineColorKeyFrame KeyTime="0" Value="#6BFFFFFF"/>
                                                    </ColorAnimationUsingKeyFrames>
                                                    <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient">
                                                        <SplineColorKeyFrame KeyTime="0" Value="#F4FFFFFF"/>
                                                    </ColorAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="Disabled"/>
                                        </VisualStateGroup>
                                    </VisualStateManager.VisualStateGroups>
                                    <Grid Background="#11FFFFFF" FlowDirection="LeftToRight" HorizontalAlignment="Center" Height="18" Margin="0" VerticalAlignment="Center" Width="19">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="20*"/>
                                            <ColumnDefinition Width="20*"/>
                                            <ColumnDefinition Width="20*"/>
                                            <ColumnDefinition Width="20*"/>
                                        </Grid.ColumnDefinitions>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="23*"/>
                                            <RowDefinition Height="19*"/>
                                            <RowDefinition Height="19*"/>
                                            <RowDefinition Height="19*"/>
                                        </Grid.RowDefinitions>
                                        <Border x:Name="Highlight" BorderBrush="#FF45D6FA" BorderThickness="1" Grid.ColumnSpan="4" CornerRadius="0,0,1,1" Margin="-1" Opacity="0" Grid.Row="0" Grid.RowSpan="4"/>
                                        <Border x:Name="Background" BorderBrush="#FFFFFFFF" BorderThickness="1" Background="#FF1F3B53" Grid.ColumnSpan="4" CornerRadius=".5" Margin="0,-1,0,0" Opacity="1" Grid.Row="1" Grid.RowSpan="3"/>
                                        <Border x:Name="BackgroundGradient" BorderBrush="#BF000000" BorderThickness="1" Grid.ColumnSpan="4" CornerRadius=".5" Margin="0,-1,0,0" Opacity="1" Grid.Row="1" Grid.RowSpan="3">
                                            <Border.Background>
                                                <LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
                                                    <GradientStop Color="#FFFFFFFF" Offset="0"/>
                                                    <GradientStop Color="#F9FFFFFF" Offset="0.375"/>
                                                    <GradientStop Color="#E5FFFFFF" Offset="0.625"/>
                                                    <GradientStop Color="#C6FFFFFF" Offset="1"/>
                                                </LinearGradientBrush>
                                            </Border.Background>
                                        </Border>
                                        <Rectangle Grid.ColumnSpan="4" Grid.RowSpan="1" StrokeThickness="1">
                                            <Rectangle.Fill>
                                                <LinearGradientBrush EndPoint="0.3,-1.1" StartPoint="0.46,1.6">
                                                    <GradientStop Color="#FF4084BD"/>
                                                    <GradientStop Color="#FFAFCFEA" Offset="1"/>
                                                </LinearGradientBrush>
                                            </Rectangle.Fill>
                                            <Rectangle.Stroke>
                                                <LinearGradientBrush EndPoint="0.48,-1" StartPoint="0.48,1.25">
                                                    <GradientStop Color="#FF494949"/>
                                                    <GradientStop Color="#FF9F9F9F" Offset="1"/>
                                                </LinearGradientBrush>
                                            </Rectangle.Stroke>
                                        </Rectangle>
                                        <Path Grid.ColumnSpan="4" Grid.Column="0" Data="M11.426758,8.4305077 L11.749023,8.4305077 L11.749023,16.331387 L10.674805,16.331387 L10.674805,10.299648 L9.0742188,11.298672 L9.0742188,10.294277 C9.4788408,10.090176 9.9094238,9.8090878 10.365967,9.4510155 C10.82251,9.0929432 11.176106,8.7527733 11.426758,8.4305077 z M14.65086,8.4305077 L18.566387,8.4305077 L18.566387,9.3435936 L15.671368,9.3435936 L15.671368,11.255703 C15.936341,11.058764 16.27293,10.960293 16.681133,10.960293 C17.411602,10.960293 17.969301,11.178717 18.354229,11.615566 C18.739157,12.052416 18.931622,12.673672 18.931622,13.479336 C18.931622,15.452317 18.052553,16.438808 16.294415,16.438808 C15.560365,16.438808 14.951641,16.234707 14.468243,15.826504 L14.881817,14.929531 C15.368796,15.326992 15.837872,15.525723 16.289043,15.525723 C17.298809,15.525723 17.803692,14.895514 17.803692,13.635098 C17.803692,12.460618 17.305971,11.873379 16.310528,11.873379 C15.83071,11.873379 15.399232,12.079271 15.016094,12.491055 L14.65086,12.238613 z" Fill="#FF2F2F2F" HorizontalAlignment="Center" Margin="4,3,4,3" Grid.Row="1" Grid.RowSpan="3" RenderTransformOrigin="0.5,0.5" Stretch="Fill" VerticalAlignment="Center"/>
                                        <Ellipse Grid.ColumnSpan="4" Fill="#FFFFFFFF" HorizontalAlignment="Center" Height="3" StrokeThickness="0" VerticalAlignment="Center" Width="3"/>
                                        <Border x:Name="DisabledVisual" BorderBrush="#B2FFFFFF" BorderThickness="1" Grid.ColumnSpan="4" CornerRadius="0,0,.5,.5" Opacity="0" Grid.Row="0" Grid.RowSpan="4"/>
                                    </Grid>
                                </Grid>
                            </ControlTemplate>
                        </Grid.Resources>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <Button x:Name="PART_Button" Grid.Column="1" Foreground="{TemplateBinding Foreground}" Focusable="False" HorizontalAlignment="Left" Margin="3,0,3,0" Grid.Row="0" Template="{StaticResource DropDownButtonTemplate}" VerticalAlignment="Top" Width="20"/>


                        <DatePickerTextBox x:Name="PART_TextBox" Grid.Column="0" Focusable="{TemplateBinding Focusable}" HorizontalContentAlignment="Stretch" Grid.Row="0" VerticalContentAlignment="Stretch" Text="{Binding SelectedDate,RelativeSource={RelativeSource TemplatedParent},StringFormat='dd/MM/yyyy'}" />
                        <Grid x:Name="PART_DisabledVisual" Grid.ColumnSpan="2" Grid.Column="0" IsHitTestVisible="False" Opacity="0" Grid.Row="0">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
                            <Rectangle Grid.Column="0" Fill="#A5FFFFFF" RadiusY="1" Grid.Row="0" RadiusX="1"/>
                            <Rectangle Grid.Column="1" Fill="#A5FFFFFF" Height="18" Margin="3,0,3,0" RadiusY="1" Grid.Row="0" RadiusX="1" Width="19"/>
                            <Popup x:Name="PART_Popup" AllowsTransparency="True" Placement="Bottom" PlacementTarget="{Binding ElementName=PART_TextBox}" StaysOpen="False"/>
                        </Grid>
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <DataTrigger Binding="{Binding Source={x:Static SystemParameters.HighContrast}}" Value="false">
                        <Setter Property="Foreground" TargetName="PART_TextBox" Value="{Binding Foreground, RelativeSource={RelativeSource TemplatedParent}}"/>
                    </DataTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Alb

Answer 5

Add a Style for DatePickerTextBox like this, no CultureInfo required, make the format you want with StringFormat:

<DatePicker SelectedDate="{Binding myProperty}">
    <DatePicker.Resources>
        <Style TargetType="{x:Type DatePickerTextBox}">
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate>
                        <TextBox x:Name="PART_TextBox" Text="{Binding Path=SelectedDate, StringFormat='dd MMMM yyyy', RelativeSource={RelativeSource AncestorType={x:Type DatePicker}}}" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </DatePicker.Resources>
</DatePicker>

Missing

Answer 6

Most of the time, when you want to change date format, it's usually because your had the wrong culture.

Set the current thread culture correctly :

Thread.CurrentThread.CurrentCulture = CultureInfo.CreateSpecificCulture("fr-FR");

After that, if the culture format is still not ok for you, you can change it via ShortDatePattern and LongDatePattern properties of CulureInfo.

ci.DateTimeFormat.ShortDatePattern = "dd/MM/yyyy"; //where ci a CultureInfo object

Finally you can tell DatePicker to prefer Short or Long format via SelectedDateFormat property.

Gunwale