Kendo DateTimePicker 块表单提交事件答案

【问题标题】：Kendo DateTimePicker Block Form Submit EventKendo DateTimePicker 块表单提交事件
【发布时间】：2014-03-26 15:22:05
【问题描述】：

在我的表单中，我使用来自 Kendo UI 的 DateTimePicker。当我按下提交按钮时，会触发 DateTimePicker 的焦点，而不是表单提交事件。

@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>
}

我忘记了什么吗？

在我的 ViewModel 中，我有一个 DateTime 属性。

public DateTime ShortTimeCareForDate { get; set; }

当我按下提交按钮时，Curser 会跳到 DateTimePicker 字段中。没有其他事情发生。

当我按照提交事件更改代码时，它会按需要工作。（可能是模型中的 DateTime 属性有问题）

<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>

问候，马尔科

【问题讨论】：

当您按下按钮时，日期选择器会打开？？必须有其他代码导致此
听起来像是来自验证事件的行为。我们需要更多代码来查看问题所在。
我已经更新了我的问题

标签： asp.net-mvc razor kendo-ui kendo-asp.net-mvc

【解决方案1】：

当我使用英文日期格式时，它可以工作。但我需要德语格式。

英语：

@(Html.Kendo().DateTimePickerFor(model => model.ShortTimeCareForDate)
    .Name("ShortTimeCareForDate")
    .Value(DateTime.Now)
    .Format("yyyy-MM-dd hh:mm:ss")
    .Interval(15)
)

德语

@(Html.Kendo().DateTimePickerFor(model => model.ShortTimeCareForDate)
    .Name("ShortTimeCareForDate")
    .Value(DateTime.Now)
    .Format("dd.MM.yyyy hh:mm:ss")
    .Interval(15)
)

【讨论】：

【解决方案2】：

使用 button type="button" 而不是提交

<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>

【讨论】：

【解决方案3】：

看起来您在客户端或服务器端使用了错误的文化。

根据http://docs.telerik.com/kendo-ui/aspnet-mvc/globalization，您必须将德国文化设置如下：

在 ~/Scripts/cultures/kendo.culture.de-DE.min.js 下包含您要使用的文化

在您的 Layout.cshtml 中包含文化：

<script src="@Url.Content("~/Scripts/cultures/kendo.culture.de-DE.min.js")"></script>

然后设置它：

<script>
kendo.culture("de-DE");
</script>

如果你想在服务器端设置文化，你需要像这样更新你的 web.config：

<system.web>
 <globalization uiCulture="de-DE" culture="de-DE"></globalization>
</system.web>

这应该可以解决出现的问题

【讨论】：