Kendo DatePicker 全球化绑定问题答案

【问题标题】：Kendo DatePicker Globalization Binding IssueKendo DatePicker 全球化绑定问题
【发布时间】：2016-10-07 17:32:54
【问题描述】：

我有一个带有“es-MX”文化的 asp.net MVC 应用程序。这是我的 web.config 文件中的内容：

<globalization enableClientBasedCulture="true" uiCulture="es-MX" culture="es-MX"></globalization>

而且，这是我的 _Layout 页面中的内容：

<script type="text/javascript">
    $(function () {
        //set current to the "es-MX" culture script
        kendo.culture("es-MX");
    })
</script>

我有一个这样的剑道 DatePicker：

@(Html.Kendo().DatePickerFor(model => model.StartDate)
    .HtmlAttributes(new { @class = "input-field" })
)

当我将表单回发到我的控制器时，StartDate 字段为空。

这是我从服务器得到的响应：

"Errors":{"StartDate":{"errors":["值 \u002707/10/2016 12:00:00 一种。 m.\u0027 对 Fecha de Inicio 无效。"]}}

顺便说一句，发送到服务器的请求的 Accept-Language 是“en-US”，我觉得很奇怪。

更新：

我尝试为 DateTime 使用自定义模型绑定器，如下所示：

public class DateTimeModelBinder : IModelBinder
{
    public object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
    {
        var value = bindingContext.ValueProvider.GetValue(bindingContext.ModelName);

        if (string.IsNullOrWhiteSpace(value.AttemptedValue))
            return null;

        DateTime dateTime;
        var isDate = DateTime.TryParse(value.AttemptedValue, Thread.CurrentThread.CurrentUICulture, 
            DateTimeStyles.None, out dateTime);

        if (!isDate)
        {
            bindingContext.ModelState.AddModelError(bindingContext.ModelName, "La fecha es válido.");
            return DateTime.UtcNow;
        }

        return dateTime;
    }
}

但是，问题似乎在于传递给控制器的日期的时间部分。值07/10/2016 12:00:00 a. m. 不被“es-MX”和“en-US”文化识别为日期。

【问题讨论】：

我认为问题与文化无关，因为 2016 年 7 月 10 日应该是 es-MX（10 月 7 日）和 en-US（7 月 10 日）的验证日期跨度>
@AndrésNava-.NET，我知道，但是当我从 web.config 文件和 _Layout 页面中删除 es-MX 文化时，我没有任何问题。但是，如果我只是将 DatePicker 的文化更改为 en-US，它仍然不会绑定。
@AndrésNava-.NET，请查看我的更新。

标签： c# asp.net-mvc kendo-asp.net-mvc globalization kendo-datepicker

【解决方案1】：

乍一看，您的错误消息表明无效的日期格式已传递给模型：

"Errors":{"StartDate":{"errors":["值 \u002707/10/2016 12:00:00 一种。 m.\u0027 对 Fecha de Inicio 无效。"]}}

通过考虑从提供的 JSON 格式进行 Unicode 转换，可以将消息获取为

"Errors":{"StartDate":{"errors":["值 '07/10/2016 12:00:00 a. 米。对 Fecha de Inicio 无效。"]}}

'07/10/2016 12:00:00 a. m.' 表示作为字符串而不是可识别的 DateTime 值传递的日期格式，因此您的 model.StartDate 返回 null，因为具有 AM/PM 状态的时间部分不是有效的 DateTime 或 Nullable<DateTime> 值。

尝试将全球化脚本设置到您的视图中：

@section HeadContent 
{
    <script src="@Url.Content("~/Scripts/kendo.all.min.js")"></script>
    <script src="@Url.Content("~/Scripts/cultures/kendo.culture.es-MX.min.js")"></script>
}

或布局页面：

<head>
<script src="@Url.Content("~/Scripts/kendo.all.min.js")"></script>
<script src="@Url.Content("~/Scripts/cultures/kendo.culture.es-MX.min.js")"></script>
</head>

注意：将~/Scripts/cultures/ 更改为您的 Kendo JS 目录路径。

如果上述尝试仍然无效，请在DatePickerFor 上设置显示格式字符串：

@{
    Culture = "es-MX";
}

@(Html.Kendo().DatePickerFor(model => model.StartDate)
    .Name("StartDate")
    .Culture("es-MX")
    .Format("dd/MM/yyyy")
    .ParseFormats(new String[] { "dd/MM/yyyy" })
    .HtmlAttributes(new { @class = "input-field" })
)

或通过添加自定义日期输入规则（改编自 Edin Mahmutovic 在How to valid date format dd.MM.yyyy KENDO MVC 中的回答）：

kendo.ui.validator.rules.mvcdate = function (input) {
    if ($(input.attr('name')) === 'StartDate') {
        return input.val() === "" || kendo.parseDate(input.val(), "dd/MM/yyyy") !== null;
    }
    return true;
}

AFAIK，当Format 方法未设置特定日期格式字符串时，它使用此示例中显示的默认格式：http://demos.telerik.com/aspnet-mvc/datepicker/index。