Using TimePicker within an editor template

[Shane P]

Im trying to use a time picker without any luck.

@if (Model.OrderEndTime.HasValue)
     {
         @Html.Kendo().TimePickerFor(m => m.OrderEndTime).Interval(15).Value(Model.OrderEndTime.Value.ToString("HH:mm tt"))
     }
     else
     {
         @Html.Kendo().TimePickerFor(m => m.OrderEndTime).Interval(15)
     }

My problem is the picker is not getting bound to the value. The value is returned, I have check by 

@Html.LabelFor(m => m.OrderEndTime)
       @if (Model.OrderEndTime.HasValue)
       {
           @Html.Kendo().TimePickerFor(m => m.OrderEndTime).Interval(15).Value(Model.OrderEndTime.Value.ToString("HH:mm tt"))
           <span>@Model.OrderEndTime.Value.ToString("HH:mm tt")</span>
       }
       else
       {
           @Html.Kendo().TimePickerFor(m => m.OrderEndTime).Interval(15)
       }

adding the span and the value is correct. Do I need to do something else to get the time picker working?

Thank you!

[Vladimir Iliev]

Hi Shane,

 
From the provided information it's not clear for us what is the exact setup that you have - could you please provide the following information:

• Current View code
• Current Controller code
• Current Model code

Also I will recommend to use the following editor template:

@Html.LabelFor(m => m.OrderEndTime)
@Html.Kendo().TimePickerFor(m => m.OrderEndTime).Interval(15)

Kind Regards,
Vladimir Iliev
Telerik

[Shane P]

Hi Vladimir,


So my editor template looks like

@model Model.DailyOrderTimeSpan

<div class="daily-order">
    <label class="day">@Html.DisplayFor(m => m.Name)</label>
    <div class="order-time">
        @Html.HiddenFor(m => m.Day)
        @Html.LabelFor(m => m.OrderStartTime)
        @if (Model.OrderStartTime.HasValue)
        {

               @Html.Kendo().TimePickerFor(m => m.OrderStartTime).Interval(15).Value(Model.OrderStartTime.Value).Format("hh:mm tt")
        }
        else
        {
            @Html.Kendo().TimePickerFor(m => m.OrderStartTime).Interval(15)
        }

    </div>
    <div class="order-time">
        @Html.LabelFor(m => m.OrderEndTime)
        @if (Model.OrderEndTime.HasValue)
        {
            @Html.Kendo().TimePickerFor(m => m.OrderEndTime).Interval(15).Value(Model.OrderEndTime.Value).Format("hh:mm tt")
            <span>@Model.OrderEndTime.Value.ToString("hh:mm tt")</span>
        }
        else
        {
            @Html.Kendo().TimePickerFor(m => m.OrderEndTime).Interval(15)
        }
    </div>
</div>

A reduced view

@model Model.OrderModel


                        @Html.EditorFor(m => m.Monday)
                        @Html.EditorFor(m => m.Tuesday)
                        @Html.EditorFor(m => m.Wednesday)
                        @Html.EditorFor(m => m.Thursday)
                        @Html.EditorFor(m => m.Friday)
                        @Html.EditorFor(m => m.Saturday)
                        @Html.EditorFor(m => m.Sunday)

                        <div class="clear"></div>

   Model

public class OrderModel
{

    public Guid StoreId { get; set; }
    public DailyOrderTimeSpan Monday { get; set; }
    public DailyOrderTimeSpan Tuesday { get; set; }
    public DailyOrderTimeSpan Wednesday { get; set; }
    public DailyOrderTimeSpan Thursday { get; set; }
    public DailyOrderTimeSpan Friday { get; set; }
    public DailyOrderTimeSpan Saturday { get; set; }
    public DailyOrderTimeSpan Sunday { get; set; }

}

  public class DailyOrderTimeSpan
{
        public int Day { get; set; }
        public string Name { get; set; }

    [Display(Name = "First order")]
    public DateTime? OrderStartTime { get; set; }

    [Display(Name = "Last order")]
    public DateTime? OrderEndTime { get; set; }

}

Controller 

var vm = new StoreOrderModel()
            {
                BusinessId = BusinessInfo.Id,
                Monday = new DailyOrderTimeSpan()
                    {
                        Day = 1,
                        Name = "Monday",
                        OrderEndTime = new DateTime(2013, 5, 29, 6, 0, 0),
                        OrderStartTime = new DateTime(2013, 5, 29, 20, 0, 0)
                    },
                Tuesday = new DailyOrderTimeSpan()
                {
                    Day = 2,
                    Name = "Tuesday",
                    OrderEndTime = new DateTime(2013, 5, 29, 6, 0, 0),
                    OrderStartTime = new DateTime(2013, 5, 29, 20, 0, 0)
                },
                Wednesday = new DailyOrderTimeSpan()
                {
                    Day = 3,
                    Name = "Wednesday",
                    OrderEndTime = new DateTime(2013, 5, 29, 6, 0, 0),
                    OrderStartTime = new DateTime(2013, 5, 29, 20, 0, 0)
                },
                Thursday = new DailyOrderTimeSpan()
                {
                    Day = 4,
                    Name = "Thursday",
                    OrderEndTime = new DateTime(2013, 5, 29, 6, 0, 0),
                    OrderStartTime = new DateTime(2013, 5, 29, 20, 0, 0)
                },
                Friday = new DailyOrderTimeSpan()
                {
                    Day = 5,
                    Name = "Friday",
                    OrderEndTime = new DateTime(2013, 5, 29, 6, 0, 0),
                    OrderStartTime = new DateTime(2013, 5, 29, 20, 0, 0)
                },
                Saturday = new DailyOrderTimeSpan()
                {
                    Day = 6,
                    Name = "Saturday",
                    OrderEndTime = new DateTime(2013, 5, 29, 6, 0, 0),
                    OrderStartTime = new DateTime(2013, 5, 29, 20, 0, 0)
                },
                Sunday = new DailyOrderTimeSpan()
                {
                    Day = 7,
                    Name = "Sunday",
                    OrderEndTime = new DateTime(2013, 5, 29, 6, 0, 0),
                    OrderStartTime = new DateTime(2013, 5, 29, 20, 0, 0)
                }
            };
        return View(vm);

The span

<span>@Model.OrderEndTime.Value.ToString("hh:mm tt")</span>

Always shows the right data however none of the timepickers display the data from the controller.

[Vladimir Iliev]

Hi Shane,

 
For convenience I created sample project from the provided information that works as expected on our side - could you please check it and let me know how it differs from your real setup?

Kind Regards,
Vladimir Iliev
Telerik

[Shane P]

Hi again,

 No data is displayed for me in the view.

See image

[Vladimir Iliev]

Hi Shane,

 
As the provided demo works as expected on our side it seems that the issue it's related to the local system that you are using - I would suggest to try the following:

• Clear your browser cache
• Check if the browser is not using emulating another User agent (Overrides tab)
• If the above point doesn't help please contact your local administrator

For convenience I also recorded small screencast of the working project on our side, current browser version and the current browser settings that we are using. 

Kind Regards,
Vladimir Iliev
Telerik

[Shane P]

Hi Vladimir,

I've deleted all old data, tried different browsers yet no luck.

Spoken to the local administrator - (me) and he can't help.

What regional & keyboard settings are you using on your computer? this is the only thing I can think of.

[Shane P]

Ok so I went File > New Project > KendoUI MVC application and copied over the models,editor template,controller action, view into the new project and still the same issue.

What issue of the KendoUI.dll are you using?

I have attached the project I created. I had to remove the kendo scripts to make the site fit under the 2mb max file upload

Please help!!!

[Vladimir Iliev]

Hi Shane,

 
After reviewing the provided project I can confirm that you are using the same version as ours (2013.1.514). I would suggest to also try:

• Rreinstalling KendoUI for ASP.NET MVC and the example project from my previous reply
• Run the project that I previously provided on another PC 

Also please note that without a project that reproduced the problem on our side, we could only guess what the reason is and as you can see this approach doesn't work and we are getting out of ideas.

Kind Regards,
Vladimir Iliev
Telerik

[Vladimir Iliev]

Hi Shane,

After the last bit of information (in the duplicated support thread) we finally able to reproduce the issue on our side by setting the client culture to "en-NZ", however the reason for this behavior is that the cultures on the server and the client side are different which is invalid configuration. I would suggest to check the Globalization article in our documentation which demonstrates how to configure the project correctly. 

Kind Regards,
Vladimir Iliev
Telerik