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

[Tom]

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?

[Lancelot]

Hi Tom,

 As seen in this post, the developer team is working on the fix right now and it will be available in the next internal build. You can access internal builds of a product by using the Latest Internal Build page or you can get it from your products list page under the "Manage Products" drop down on your account Overview page.

Lancelot

[Georgi]

Thanks, Lance!

@Tom, we have have uploaded the new build and you may download it from your account. We have actually replaced the previous build as the bug is critical and anyone using the Date/Time pickers will hit it.

I hope this helps. Please let us know if you have any other question/problem with our tools.

All the best,
Georgi
the Telerik team

[Tom]

Great improvement guys, everythings works as expected now! I'll let you know when our app is available in the store, a lot of users will be very happy now :) 

[Georgi]

Hi Tom,

Thanks for your kind words and your precious feedback - we are happy to solve the issue.

Yes, that will be great, looking forward to see your app in the Store.

Regards,
Georgi
the Telerik team