Kendo DateTimePicker Block Form Submit Event - asp.net-mvc

Question

In my form I use the DateTimePicker from Kendo UI. When I press the submit button the focus of the DateTimePicker is triggered and not the form submit event.
#using (Html.BeginForm("Edit", "NursingHome", FormMethod.Post, new { #class = "form-horizontal", #role = "form" }))
{
#Html.AntiForgeryToken()
<div class="form-group">
#Html.LabelFor(model => model.ShortTimeCare, new { #class = "col-xs-4 col-sm-3 col-md-2 col-lg-2 control-label" })
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<div class="input-group">
<span class="input-group-addon"><span class="fa fa-user"></span></span>
#(Html.Kendo().NumericTextBoxFor(model => model.ShortTimeCare)
.Format("n0")
.Min(0)
)
</div>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
#(Html.Kendo().DateTimePickerFor(model => model.ShortTimeCareForDate)
.Name("ShortTimeCareForDate")
.Value(DateTime.Now)
.Interval(15)
)
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-4 col-sm-offset-3 col-md-offset-2 col-lg-offset-2 col-xs-10 col-sm-10 col-md-2 col-lg-2">
<button type="submit" class="btn btn-default">Save</button>
</div>
</div>
}
Have I forgotten something?
In my ViewModel I have a DateTime attribute.
public DateTime ShortTimeCareForDate { get; set; }
When I press the submit button the Curser jumps into the DateTimePicker Field. Nothing else happens.
When I change the code as following the submit event works as desired. (Maybe a Problem with the DateTime Attribute in the Model)
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
#(Html.Kendo().DateTimePicker() // For(model => model.ShortTimeCareForDate)
.Name("ShortTimeCareForDateXXXXX")
.Value(DateTime.Now)
.Interval(15)
)
</div>
regards,
Marko

Answer 1

When I use the english dateformat then it works. But I need the german format.
English:
#(Html.Kendo().DateTimePickerFor(model => model.ShortTimeCareForDate)
.Name("ShortTimeCareForDate")
.Value(DateTime.Now)
.Format("yyyy-MM-dd hh:mm:ss")
.Interval(15)
)
German
#(Html.Kendo().DateTimePickerFor(model => model.ShortTimeCareForDate)
.Name("ShortTimeCareForDate")
.Value(DateTime.Now)
.Format("dd.MM.yyyy hh:mm:ss")
.Interval(15)
)

Answer 2

Use button type="button" instead of using submit
<div class="form-group">
<div class="col-xs-offset-4 col-sm-offset-3 col-md-offset-2 col-lg-offset-2 col-xs-10 col-sm-10 col-md-2 col-lg-2">
<button type="button" class="btn btn-default">Save</button>
</div>
</div>

Answer 3

looks like you are using the wrong culture either on the client or on the server side.
according to http://docs.telerik.com/kendo-ui/aspnet-mvc/globalization you have to set the german culture like follows:
include the culture you want to use right under ~/Scripts/cultures/kendo.culture.de-DE.min.js
in your Layout.cshtml include the culture:
<script src="#Url.Content("~/Scripts/cultures/kendo.culture.de-DE.min.js")"></script>
and set it afterwards:
<script>
kendo.culture("de-DE");
</script>
if you want to set the culture on the server side you need to update your web.config like that:
<system.web>
<globalization uiCulture="de-DE" culture="de-DE"></globalization>
</system.web>
this should fix the occurring issue