Kendo DatePicker 全球化绑定问题

Question

我有一个具有 "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>

我有一个 Kendo DatePicker 是这样的：

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

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

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

"Errors":{"StartDate":{"errors":["The value \u002707/10/2016 12:00:00 a. m.\u0027 is not valid for 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" 文化识别为日期。

Answer 1

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

"Errors":{"StartDate":{"errors":["The value \u002707/10/2016 12:00:00 a. m.\u0027 is not valid for Fecha de Inicio."]}}

考虑到提供的 JSON 格式的 Unicode 转换，可以将消息提取为

"Errors":{"StartDate":{"errors":["The value '07/10/2016 12:00:00 a. m.' is not valid for Fecha de Inicio."]}}

'07/10/2016 12:00:00 a. m.' 表示日期格式作为字符串而不是可识别的 DateTime 值传递，因此您的 model.StartDate returns 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.

Kendo DatePicker 全球化绑定问题

Kendo DatePicker Globalization Binding Issue

c#

asp.net-mvc

kendo-asp.net-mvc

globalization

kendo-datepicker