[Solved] Issue with TimePicker control not validating input properly (2011.2.712.340)

[Andreas Kluth]

I'm facing the following issue, having a TimePicker on your view and rely on the input validation of the TimePicker you can end in an inconsistent state.

Steps to reproduce:
1. Add the following code snippet to your view:

<%: Html.Telerik().TimePickerFor(m => m).Format( "HH:mm" ).OpenOnFocus( true ) %>

2. Enter a arbitrary number into the control (e.g. 9999). The TimePicker gets invalid and is highlighted according to your css-style.
3. Click on the "clock" symbol but do not select a new value.
4. The control is marked as valid.
5. Submit your form.

If your controller action is sth. like:

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Index( TimeTrackingViewModel viewModel )
{
  if( viewModel == null )
  {
    throw new ArgumentNullException( "viewModel" );
  }
  // Check wether the model is valid.
  if( ModelState.IsValid )
  {
    // Removed for clarity...
  }
  return View( viewModel );
}

The the invalid ModelState is passed back to your View, which is good. However the Telerik control then throws an exception:

String was not recognized as a valid DateTime.

Exception Details: System.FormatException: String was not recognized as a valid DateTime.

Source Error:

Line 1:  <%@ Control Language="C#" Inherits=".....ViewUserControlBase<TimeSpan?>" %>
Line 2:  <%: Html.Telerik().TimePickerFor(m => m).Format( "HH:mm" ).OpenOnFocus( true ) %>


Source File:  ..\Shared\EditorTemplates\TimeSpan.ascx    Line: 2

Stack Trace:


[FormatException: String was not recognized as a valid DateTime.]
   System.DateTimeParse.Parse(String s, DateTimeFormatInfo dtfi, DateTimeStyles styles) +5958546
   System.ComponentModel.DateTimeConverter.ConvertFrom(ITypeDescriptorContext context, CultureInfo culture, Object value) +235

[FormatException: 99999 is not a valid value for DateTime.]
   System.ComponentModel.DateTimeConverter.ConvertFrom(ITypeDescriptorContext context, CultureInfo culture, Object value) +3402814
   System.Web.Mvc.ValueProviderResult.ConvertSimpleType(CultureInfo culture, Object value, Type destinationType) +330

[InvalidOperationException: The parameter conversion from type 'System.String' to type 'System.DateTime' failed. See the inner exception for more information.]
   System.Web.Mvc.ValueProviderResult.ConvertSimpleType(CultureInfo culture, Object value, Type destinationType) +896816
   Telerik.Web.Mvc.UI.InputComponentExtensions.GetValue(IInputComponent`1 instance, Func`2 converter) +359
   Telerik.Web.Mvc.UI.Html.TimePickerHtmlBuilder.InputTag() +170
   Telerik.Web.Mvc.UI.Html.TimePickerHtmlBuilder.Build() +303
   Telerik.Web.Mvc.UI.TimePicker.WriteHtml(HtmlTextWriter writer) +241
   Telerik.Web.Mvc.UI.ViewComponentBase.ToHtmlString() +106
   Telerik.Web.Mvc.UI.ViewComponentBuilderBase`2.ToHtmlString() +16

[Georgi Krustev]

Hello Andreas,

 
The issue, which described is expected, because the validation of the Date/Time pickers is only visual. In order to prevent posting it to the server I will suggest you use client/server validation, which will prevent binding TimePicker UI component to an incorrect data.

Regards,
Georgi Krustev
the Telerik team

[Andreas Kluth]

Hi Georgi,

what I think is a bit annoying is that we indeed use server validation; that's why I'm returing the same view allowing the user to check and change the values he entered. However the TimePicker component refuses to render the value it previously accepted.

I ended up clearing the ModelState, loosing a bit usability for invalid values.

ModelState.Clear();

[Georgi Krustev]

Hello Andreas,

 
The TimePicker UI component relies on the DateTime object and that is why it could not renders incorrect DateTime object. 

I will suggest you use client validation which will inform the end user that the entered value is not correct and will not allow submitting the form.

Regards,
Georgi Krustev
the Telerik team

[Andreas Kluth]

Hi Georgi,

I'm using a strongly typed ViewModel using valid TimeSpan? objects, which seams to be supported by TimePickerBuilder. I know that I don't know your code as good as you do; however I suppose that the following code fails with a valid timespan, because template T is set to DateTime.

if (viewData.ModelState.TryGetValue(instance.Name, out state) && viewData.ModelState.IsValidField(instance.Name) && state.Value != null))
            {
                value = state.Value.ConvertTo(typeof(T), state.Value.Culture) as T?;
            }

Changing my ViewModel to DateTime? fixed the behaviour.

[Georgi Krustev]

Hello Andreas,

 
Internally TimePicker uses DateTime, instead of TimeSpan, because we need to support .NET 3.5 too.
We will investigate more on this case and if it is possible, we will try to address this issue.

All the best,
Georgi Krustev
the Telerik team