After using Kendo Date picker and time picker, AjaxForm doesn't submit

Question

I have this AjaxForm

@using (Ajax.BeginForm("AttendeeAvailability", "Response", new AjaxOptions { HttpMethod = "POST", OnSuccess = "done" }))
{
    @Html.ValidationSummary(true)
    @Html.AntiForgeryToken();   
    <div class="col-md-12">
        <fieldset>
            <legend>Enter your availability</legend>
            <div class="well">
                <div class="col-md-12">
                    <div class="form-group">
                        @Html.Kendo().DatePickerFor(m=>m.AttendeeDate).Min(Model.AppointmentStartDate.Date).Max(Model.AppointmentEndDate)
                        @*<div class="input-group date" id="DateStart">
                            @Html.TextBoxFor(m => m.AttendeeDate, new { @class = "form-control" })

                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div>*@
                    </div>
                </div>

                <div class="col-md-12">
                    <div class="form-group">
                        <h5><b>Please select time you are available in</b></h5>
                    </div>
                </div>
                <div class='col-md-6'>
                    <div class="form-group">
                        <h6>From</h6>
                        @Html.Kendo().TimePickerFor(m=>m.AttendeeStartTime)
                        @*<div class='input-group date' id='StartTime'>
                            @Html.TextBoxFor(m => m.AttendeeStartTime, new { @class = "form-control" })
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-time"></span>
                            </span>
                        </div>*@
                    </div>
                </div>
                <div class='col-md-6'>
                    <div class="form-group">
                        <h6>To</h6>
                        @Html.Kendo().TimePickerFor(m => m.AttendeeEndTime)
                        @*<div class='input-group date' id='EndTime'>
                            @Html.TextBoxFor(m => m.AttendeeEndTime, new { @class = "form-control" })
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-time"></span>
                            </span>
                        </div>*@
                    </div>
                </div>
                <div class="form-group">
                    <input class="btn btn-default" type="submit" value="Add" />
                </div>
            </div>
        </fieldset>
    </div>

}

Here whenever I try to submit the form clicking the Add button, it doesn't submit the form. It highlihgts one the time pciker.

However, if I comment KendoDatepicker and timepickers, and uncomment the other datepicker and timepicker, my form gets submitted. Any reason why?

Here is the view Model

public class AttendeeAvailableDateTime
{

    public DateTime AppointmentStartDate { get; set; }
    public DateTime AppointmentEndDate { get; set; }

    public DateTime AttendeeDate { get; set; }
    public DateTime AttendeeStartTime { get; set; }
    public DateTime AttendeeEndTime { get; set; }
    public int TotalAttendees { get; set; }      
}

Error:

I just tried to put validation message and this is what I got as validation error in browser

The field AttendeeStartTime must be a date.

So, I should change my model?

If I change

public DateTime AttendeeStartTime { get; set; }
 public DateTime AttendeeEndTime { get; set; }

to type string then I get this error

Cannot implicitly convert type `string` to 'System.DateTime?'

in this line

 @Html.Kendo().TimePickerFor(m=>m.AttendeeStartTime)

So what should i do?

Answer 1

Just realised that in order to use TimePickerFor from kendo, model's field should be of type TimeSpan and not DateTime or string