如何在 Kendo 中验证 dd/MM/yyyy 日期格式？答案

【问题标题】：How to validate dd/MM/yyyy Date Format in Kendo?如何在 Kendo 中验证 dd/MM/yyyy 日期格式？
【发布时间】：2021-11-16 11:19:33
【问题描述】：

我正在使用以下代码以 MVC 表单形式向用户询问开始日期和结束日期

 @using (Html.BeginForm("InfoEdit", "Info", FormMethod.Post, new { id = "Form" }))
{
    <table>
        <tr>
            <td>Start DateTime</td>
            <td>
                @(Html.Kendo().DateTimePickerFor(model => model.StartDateTime).Name("StartDateTime").Format("dd/MM/yyyy HH:mm tt").ParseFormats(new string[] { "dd/MM/yyyy" }).HtmlAttributes(new { style = "width:300px;", onkeydown="javascript:return false;" }))
            </td>
        </tr>
        <tr>
            <td>Expiration DateTime</td>
            <td>
                @(Html.Kendo().DateTimePickerFor(model => model.ExpirationDateTime).Name("ExpirationDateTime").Format("dd/MM/yyyy HH:mm tt").ParseFormats(new string[] { "dd/MM/yyyy" }).HtmlAttributes(new { style = "width:300px;", onkeydown="javascript:return false;" }))
            </td>
        </tr>
    </table>
}

javascript代码如下：

$(document).ready(function () {
    function onChange() {
        var StartDateTime = $("#StartDateTime").val().split(" ");
        var date = StartDateTime[0].split("/");
        var time = StartDateTime[1].split(":");
        var dd = date[0];
        var MM = date[1];
        var yyyy = date[2];
        var HH = time[0];
        var min = time[1];
        var tt = StartDateTime[2];
        StartDateTime = new Date(yyyy,MM-1,dd,HH,min);
        var ExpirationDateTime = new Date(StartDateTime.setHours(StartDateTime.getHours() + 1))
        $("#ExpirationDateTime").data("kendoDateTimePicker").value(ExpirationDateTime);    
    }

    $("#StartDateTime").kendoDateTimePicker({
        change: onChange,
        format: "dd/MM/yyyy HH:mm tt",
        parseFormats: ["dd/MM/yyyy"]
    });
}

我有以下值的模型：

[Required(ErrorMessage = "Start Datetime is required.")]
[DataType(DataType.DateTime)]
public DateTime StartDateTime { get; set; }

[Required(ErrorMessage = "Expiration Datetime is required.")]
[DataType(DataType.DateTime)]
public DateTime ExpirationDateTime { get; set; }

但是当我提交表单时，我收到如下错误：

The value '16/11/2021 11:10 AM' is not valid for StartDateTime.
The value '16/11/2021 12:10 PM' is not valid for ExpirationDateTime.

它适用于默认格式，即 MM/dd/yyyy，但我希望它作为 dd/MM/yyyy 工作。我尝试使用kendoValidator，但它对我不起作用，或者我没有正确使用它。我该怎么做才能传递 dd/MM/yyyy 日期格式？

另外，需要注意的一点是，如果日期的 dd 部分小于或等于 12，则日期过去时不会出现任何错误。

【问题讨论】：

标签： javascript asp.net-mvc date datetime kendo-ui

【解决方案1】：

您正在应用剃刀语法中的格式，这可能是您收到错误的原因。我试过下面的代码，这对我有用。即使在编辑模式下也可以。

Razor 语法
@Html.TextBoxFor(m=>m.StartDateTime)

JavaScript 语法

$(document).ready(function () { $("#StartDateTime").kendoDatePicker({ 格式：“dd/MM/yyyy HH:mm tt”, }); });

【讨论】：

它对我不起作用。同样在页面的第一次加载时，日期格式不是我想要显示的。

【解决方案2】：

由于 en-US 是默认文化，我们需要将文化设置为 en-GB。为此：

<script src="https://kendo.cdn.telerik.com/2021.3.1109/js/cultures/kendo.culture.en-GB.min.js"></script>

$(document).ready(function () {
    //set the culture
    kendo.culture("en-GB");
    function onChange() {
        // code goes here
    }
}

并通过添加修改 Web.Config 文件

<system.web>
    <globalization uiCulture="en-GB" culture="en-GB"></globalization>
</system.web>

【讨论】：