Razor Pages DatePickerFor not working

[AJ]

I was trying to get DatePickerFor work on a Kendo Grid Popup editor with no luck. I've already spent countless hours first with the DropDownListFor (https://www.telerik.com/forums/dropdownlistfor-events-in-razor-pages) which still doesn't work and now with DatePickerFor. Any help is much appreciated.

I have the DatePickerFor in a Kendo Grid Popup Template.

Grid:

.DataSource(dataSource => dataSource
                .Custom()
                .Transport(t => {
                    t.Read(r => r.Action("Cases", "CaseList", new { handler = "GetCases" }).Type(HttpVerbs.Post).Data("sendAntiForgeryToken"));
                    t.Create(r => r.Action("Cases", "CaseList", new { handler = "AddCase" }).Type(HttpVerbs.Post).Data("sendAntiForgeryToken"));
                })

Razor Page:

public JsonResult OnPostAddCase([DataSourceRequest] DataSourceRequest request, CaseModel newCase)
        {
            if(ModelState.IsValid)
            {
               
            }
        }

 

Popup Template:

@(Html.Kendo().DatePickerFor(model => model.LetterDate)
                        .HtmlAttributes(new { style = "width:150px; font-size:14px" })
            )

Model:

[DataType(DataType.Date, ErrorMessage ="Letter Date is required")]
        [DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}", ApplyFormatInEditMode = true)]
        [Display(Name ="LetterDate")]
        public DateTime LetterDate { get; set; }

FormData:

LetterDate: Tue Jul 31 2018 13:04:15 GMT-0400 (Eastern Daylight Time)

Error: The value 'Tue Jul 31 2018 13:04:15 GMT-0400 (Eastern Daylight Time)' is not valid for LetterDate.

I have tried several solutions like setting up the culture, changing the formats but nothing seems to work.

The only option that I'm left with is intercepting the date before submit. But before I do that I would like to know why it is so hard to get the basic functionality work with kendo controls. This is so frustrating.

[Georgi]

Hello Raju,

I noticed that the topic of this thread is the same as in ticket with ID 1179713.

Since I have already answered in the ticket I am pasting the answer here in case someone else hits the same issue.

=================

A common cause for the described behavior is miss matching cultures on server and client. Have in mind that the default culture of Kendo is en-US (on client). However, when server wrappers are used, the validations rules depend on the server culture. Therefore if the culture on the server is not en-US the validation will expect another format for the dates.

A possible solution is to get the culture from the server and set the client side culture to be the same.

e.g.

@{
    var culture = System.Globalization.CultureInfo.CurrentCulture.ToString();
}

<script src="@string.Format("https://kendo.cdn.telerik.com/2018.2.620/js/cultures/kendo.culture.{0}.min.js",culture)"></script>

<script type="text/javascript">
    kendo.culture("@culture");
</script>

Regards,
Georgi
Progress Telerik