This is a migrated thread and some comments may be shown as answers.

[Solved] DatePicker popup UI fails to update in double DatePicker scenario

4 Answers 177 Views

DatePicker for XAML

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Tom asked on 17 Sep 2012, 03:48 PM

In a project I'm currently working on users are required to pick a date range. This is implemented by showing two DatePickers, one for the start date and one for the end date. Some background info:

First date has a min of today and a max of today+365 days
Second date has a min of first date + 1 day and a max of first date + 30 days
This is implemented in an MVVM scenario where all current, min and max values are databound. The current value has a twoway binding to update the ViewModel accordingly when a new date is set.

So the "complicated" part of this scenario is that the current, min and max values of the second DatePicker are changed when the first date is set. All changes are propagated through the ViewModel and the DatePicker shows the correct current value. There are multiple problems occuring. I will be using the second DatePicker in our scenario as an example, also here's the relevant parts of the code:

<telerik:RadDatePicker Value="{Binding FirstDate, Mode=TwoWay}" MinValue="{Binding FirstMinDate}" MaxValue="{Binding FirstMaxDate}"/>

<telerik:RadDatePicker Value="{Binding SecondDate, Mode=TwoWay}" MinValue="{Binding SecondMinDate}" MaxValue="{Binding SecondMaxDate}"/>

private DateTime _firstDate = DateTime.Today;

public DateTime FirstDate

{

get { return this._firstDate; }

set {

this.SetProperty(ref this._firstDate, value);

SecondMaxDate = FirstDate.AddDays(30);

SecondMinDate = FirstDate.AddDays(1);

if (SecondDate < FirstDate.AddDays(1)) SecondDate = FirstDate.AddDays(1);

if (SecondDate > FirstDate.AddDays(30)) SecondDate = FirstDate.AddDays(30);

}

private DateTime _firstMinDate = DateTime.Today;

public DateTime FirstMinDate

{

get { return this._firstMinDate; }

set { this.SetProperty(ref this._firstMinDate, value); }

}

private DateTime _firstMaxDate = DateTime.Today.AddDays(365);

public DateTime FirstMaxDate

{

get { return this._firstMaxDate; }

set { this.SetProperty(ref this._firstMaxDate, value); }

}

private DateTime _secondDate = DateTime.Today.AddDays(1);

public DateTime SecondDate

{

get { return this._secondDate; }

set { this.SetProperty(ref this._secondDate, value); }

}

private DateTime _secondMinDate = DateTime.Today;

public DateTime SecondMinDate

{

get { return this._secondMinDate; }

set { this.SetProperty(ref this._secondMinDate, value); }

}

private DateTime _secondMaxDate = DateTime.Today.AddDays(30);

public DateTime SecondMaxDate

{

get { return this._secondMaxDate; }

set { this.SetProperty(ref this._secondMaxDate, value); }

}

Incorrect max date handling
Current date: 09/20/2012
Max date: 10/10/2012
If I bring up the date selector ui I can set the month to 10 rendering the selected date 10/20/2012 and accept. Upon accepting the selected date is set to the max date (10/10/2012) but if I reopen the date selector it is still stuck at 10/20/2012 and the graying out of allowed/disallowed dates is messed up. Scrolling around appears to fix the view (so the control is definitely aware of the Min/Max restrictions, the UI just doesn't show)

Incorrect UI updating on changed date
This problem is probably originating from the same issue. When the value of the first datepicker is changed values on the second datepicker need to be updated. I'm handling the setting of the current value for the second datepicker from the viewmodel and the resulting view is correct, but when the selector UI is expanded (and was expanded before) it does not update.

Summarizing the above brings me to the conclusing that the DatePicker-control in it's current state does not update the UI that pops up when selecting a date, although the underlying properties are updated correctly. I put up a sample on Dropbox that clearly shows this behaviour: https://www.dropbox.com/s/flwth8jupvu8q0k/DatePickerSample.zip

Is this something that I can fix in a workaround? Or do I need to wait for an updated build of the Metro controls?

4 Answers, 1 is accepted

Accepted