Invalid Date Error : ParseFormats not working Kendo dateTimePicker

1 Answer 206 Views
Date/Time Pickers
AJ
Top achievements
Rank 1
AJ asked on 18 Nov 2021, 11:02 AM | edited on 22 Nov 2021, 09:38 AM

I have the following set of code for picking a start date and end date from user in the 'dd/MM/yyyy HH:mm tt' format.

<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 HH:mm tt" }).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 HH:mm tt" }).HtmlAttributes(new { style = "width:300px;", onkeydown="javascript:return false;" }))
            </td>
        </tr>

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 HH:mm tt"]
        }).data("kendoDateTimePicker");

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

The underlying model :


[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 whenever I do a sumbit, I get error saying :

  • The value '18/11/2021 10:59 AM' is not valid for StartDateTime.
  • The value '18/11/2021 11:59 AM' is not valid for ExpirationDateTime.

But if the day(dd) is less than or equal to 12 , the date is accepted. How do I make it accept all dates and in the format I want?

1 Answer, 1 is accepted

Sort by
1
Ivan Danchev
Telerik team
answered on 23 Nov 2021, 10:56 AM

Hello AJ,

US is the default culture, which means the first part of a date is treated as month, i.e. month/day/year. Format is set in the DatePicker but this only has effect on how the date will be displayed by the component. The server will still expect dates to be submitted in month/day/year format, unless you change the culture to one that uses day/month/year, for example en-GB. You can do that as shown below:

1. Load the culture script file after the other Kendo UI script files:

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

2. Set the culture on the client:

<script>
    kendo.culture("en-GB");
</script>

3. And on the server, by modifying the web.config:

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

 

Regards,
Ivan Danchev
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

AJ
Top achievements
Rank 1
commented on 23 Nov 2021, 11:42 AM

Thanks for this. I had culture defined but I missed out on the change to Web.Config file. It seems to be working alright now.
Tags
Date/Time Pickers
Asked by
AJ
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Share this question
or