Return date format in DateTimePicker component

[Mario]

Hi,

I have a problem with DateTimePicker component on Update action on GridView. 

In my model I've annotated the property with the following attributes:

        [Required]
        [DataType(DataType.Date)]
        [Display(Name = nameof(MessageResources.DateSent), ResourceType = typeof(MessageResources))]
        public DateTime DateSent { get; set; }

In the columns section of a gridview component custom formating is set up as following:

    .Columns(columns =>
    {
        columns.Command(command => { command.Edit(); }).Width(100);
        columns.Bound(x => x.DateSent)
        .Format("{0: dd.MM.yyyy HH:mm:ss}")
        .Title("Date Sent");
        columns.Command(command => { command.Destroy(); }).Width(100);
    })

And I have a custom pop-up form with the following  syntax and format:  

                @(Html.Kendo().DateTimePickerFor(p => p.DateSent)
                                            .Format("dd.MM.yyyy HH:mm")
                                            .HtmlAttributes(new { @readonly = "readonly", @class = "form-control" }))

On put or post operations default value (01/01/0001 00:00:00) is sent to the controller. In case I made model property nullable and without required then this value is always null.

 

[Alex Hajigeorgieva]

Hello, Mario,

Thank you for the provided code snippets.

Can you let me know why the editor has a read-only attribute?

Since the model date is read-only, it is expected that a required DateTime will be created on the server with the default value that you shared with us. Naturally, a nullable DateTime will not be generated by ASP.NET Core.

In case the DateTime already has a value, then I would guess that the globalization is at fault. Can you confirm that the client and the server side have the same culture?

This is the official globalization demo: https://demos.telerik.com/aspnet-core/grid/globalization

Look forward to hearing back from you.

Regards,
Alex Hajigeorgieva
Progress Telerik

[Mario]

Hi Alex,

It is mentioned for the editor to be user input and then I've run into this issue so I made the editor read-only and create the workaround for setting the date in the backend.

I've already tried the globalization from the demo that you've suggested.
I put in Startup.cs following code:

            IList<CultureInfo> supportedCultures = new List<CultureInfo>
            {
                new CultureInfo("en-GB")
            };
            app.UseRequestLocalization(new RequestLocalizationOptions
            {
                DefaultRequestCulture = new RequestCulture("en-GB"),
                // Formatting numbers, dates, etc.
                SupportedCultures = supportedCultures,
                // UI strings that we have localized.
                SupportedUICultures = supportedCultures
            });

Add in _Layout.cshtml the js script for the culture:

<script src="~/lib/kendo-ui/js/cultures/kendo.culture.en-GB.js"></script>

And added all the sections realated to setting the culture on client side:

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

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

The result of DateSent when I call the Put and Post operation is null and the date is set. I've added Debugging screenshots with pictures of the result that I got on action and also what I've got in the page source 

 

[Mario]

Also, the selected value is actually send to the back-end but as you can see, this is the error that I've got on me method:

ModelState.Values.SelectMany(v => v.Errors).Select(x=>x.ErrorMessage)
{System.Linq.Enumerable.WhereSelectEnumerableIterator<Microsoft.AspNetCore.Mvc.ModelBinding.ModelError, string>}
    [0]: "The value '8/21/2018 3:54:29 PM' is not valid for Sent Date."

[Mario]

I created a small demo project that reflects this issue. Since I cannot attach the zip with the asp.net core project to this thread. Here is the demo project: TelerikDatePickerDemo

[Preslav]

Hi Mario,

Thank you for creating the demo project. Unfortunately, we do not have access to download it. Having said that, could you please send it via another file-sharing service? For example, Dropbox, or anything else that works for you.

I look forward to your reply.


Regards,
Preslav
Progress Telerik

[Mario]

Hi Preslav,

I've added the project to Dropbox: TelerikDatePickerDemo

 

[Viktor Tachev]

Hello Mario,

I apologize for the late reply. 

When investigating the behavior with the sample project we noticed that the date was sent to the server in en-US format by default. This was done in order to fix an old issue with binding numeric and date values in different cultures. 

Currently as a workaround I can suggest using a Custom() data source and including parameterMap function. This way the Date field can be sent to the server in the expected format. 

I apologize for any inconvenience this can cause you.


Regards,
Viktor Tachev
Progress Telerik