DatePicker doesn't update view model unless focus changes to another control

Question

How can I make the DatePicker control update the view model without losing focus?

I'd like to be able to run this sample, type 12/9/11 for the date, click the close button for the window and have the Debug.Assert pass. If I tab to the text box before closing the window it works fine.

<Window x:Class="DatePickerTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" Closing="MainWindow_OnClosing">
    <StackPanel>
        <DatePicker Name="TheDate" SelectedDate="{Binding Path=SelectedDate}" />
        <TextBox/>
    </StackPanel>
</Window>

using System;
using System.ComponentModel;
using System.Diagnostics;

namespace DatePickerTest
{
   public partial class MainWindow
   {
      public MainWindow()
      {
         InitializeComponent();
         DataContext = new ViewModel();
      }

      private void MainWindow_OnClosing(object sender, CancelEventArgs e)
      {
         var dataContext = DataContext as ViewModel;
         Debug.Assert(dataContext.SelectedDate == new DateTime(2011, 12, 9));
      }
   }

   public class ViewModel
   {
      public DateTime SelectedDate { get; set; }
   }

}

Possible duplicate of https://stackoverflow.com/questions/4542291/datepicker-selecteddate-not-changing-when-text-is-input — Ddddan, Jun 18 '20 at 15:05

score 11 · Accepted Answer · edited May 09 '14 at 19:01

11

Try changing the UpdateSourceTrigger to PropertyChanged, e.g.

<DatePicker Name="TheDate" 
            SelectedDate="{Binding Path=SelectedDate
                 , UpdateSourceTrigger=PropertyChanged
                 , Mode=TwoWay}" />

Update

Ok, it seems as though this is a known issue with the DatePicker. You can bind to the Text property instead, and set a TargetNullValue:

<DatePicker
   Name="TheDate"
   Text="{Binding Path=SelectedDate
          , Mode=TwoWay
          , UpdateSourceTrigger=PropertyChanged
          , ValidatesOnDataErrors=True
          , TargetNullValue=''}"
/>

edited May 09 '14 at 19:01

JiBéDoublevé

4,124
4
36
57

answered Dec 09 '11 at 21:20

devdigital

34,151
9
98
120

1

I changed the sample to use your suggestion and it didn't work. I think that UpdateSourceTrigger defaults to PropertyChanged and Mode defaults to TwoWay. – Robin Dec 09 '11 at 22:08
2

**Comment by [Robin](http://stackoverflow.com/users/108040/) (rejected edit):** That works, thank you. Actually, all that is required in this case is: `` – Anne Dec 13 '11 at 23:28
Binding to the text will cause some date formats like dd.mm.yyyy. not to be parsed correctly – Abdalwhab Bakheet Apr 11 '16 at 11:34

Laila · Answer 2 · 2017-10-14T11:46:14.843

Try this:

public class CustomDatePicker : DatePicker
{
    protected DatePickerTextBox _datePickerTextBox;

    public static readonly new DependencyProperty SelectedDateProperty =
        DependencyProperty.Register(nameof(SelectedDate), typeof(DateTime?), typeof(CustomDatePicker), 
            new FrameworkPropertyMetadata(null, SelectedDateChanged) { BindsTwoWayByDefault = true });

    private static new void SelectedDateChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        ((CustomDatePicker)d).SelectedDate = (DateTime?)e.NewValue;
    }

    public new DateTime? SelectedDate
    {
        get { return (DateTime?)GetValue(SelectedDateProperty); }
        set
        {
            if (base.SelectedDate != value) base.SelectedDate = value;
            if (this.SelectedDate != value) SetValue(SelectedDateProperty, value);
        }
    }

    public override void OnApplyTemplate()
    {
        base.OnApplyTemplate();

        _datePickerTextBox = this.Template.FindName("PART_TextBox", this) as DatePickerTextBox;
        if (_datePickerTextBox != null)
            _datePickerTextBox.TextChanged += dptb_TextChanged;
    }

    private void dptb_TextChanged(object sender, TextChangedEventArgs e)
    {
        int index = _datePickerTextBox.SelectionStart;
        string text = _datePickerTextBox.Text;

        DateTime dt;
        if (DateTime.TryParse(_datePickerTextBox.Text, Thread.CurrentThread.CurrentCulture,
            System.Globalization.DateTimeStyles.None, out dt))
            this.SelectedDate = dt;
        else
            this.SelectedDate = null;

        _datePickerTextBox.Text = text;
        _datePickerTextBox.SelectionStart = index;
    }
}

It's an improved version of what I found here. It updates the SelectedDate as the user types.

DatePicker doesn't update view model unless focus changes to another control

2 Answers2