How to validate dd/MM/yyyy Date Format in Kendo?-CodePudding

I am using the following code for asking user for a Start Date and an End Date as a MVC Form

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

The javascript code is as follows :

$(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"]
    });
}

I have model for the values as below :

[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; }

But when I submit the form, I get the error as below :

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.

It works for the default format i.e. MM/dd/yyyy but I want it work as dd/MM/yyyy. I tried using kendoValidator but it didn't work for me or maybe I didn't use it correctly.What can I do to pass the dd/MM/yyyy date format?

Also, one thing to note is if the dd part of the date is less than or equal to 12, the date passes without any error.

CodePudding user response：

You are applying formatting in the razor syntax, that might be the reason you are getting error. I have tried below code and that is worked for me. Even that will work in case of edit mode.

Razor Syntax
@Html.TextBoxFor(m=>m.StartDateTime)

JavaScript Syntax

$(document).ready(function () { $("#StartDateTime").kendoDatePicker({ format: "dd/MM/yyyy HH:mm tt", }); });

CodePudding user response：

Since en-US is the default culture, we need to set culture as en-GB. To do this :

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

and modify the Web.Config file by adding

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