Custom format for datetime column with inline editing

[Alexandra]

I have a grid with a datetime column that needs to be batch edited. The column has to be custom formatted that is different than the default format of the culture.

The code looks something like:

columns.Bound(product => product.DateField).Format("{0:dd.MM.yyyy}")

 

Also I have added the templates from Kendo src for Date/DateTime.  @(Html.Kendo().DateTimePickerFor(m => m))

 

When I edit I always get the message "The field DateField must be a date".

I even tried to change the template with .ParseFormats(new string[] { "dd.MM.yyyy" }) but still I get the same message.

 

Can the datetimepicker be used in editing grid with custom format?

[Alex Hajigeorgieva]

Hi Alexandra,

I tried to reproduce the same behaviour to no avail in one of our demos which I modified to be as close to your scenario as possible:

http://dojo.telerik.com/aZESIv/2

Could you please advise why the Kendo UI DateTimePicker widget is used (as opposed to the DatePicker widget) when the time portion will not be shown to the user?

I suggest setting the Format() of the DatePicker:

.Format("dd.MM.yyyy")

Let me know how you get on.

Regards,
Alex Hajigeorgieva
Progress Telerik

[Sebastian]

Hi Alex,

I work with Alexandra and we could still not make the date picker work with a different format work.

We have found a project http://www.telerik.com/support/code-library/using-utc-time-on-both-client-and-server-sides but this does work if the machine has a different culture than en. If the machine has the English format the project works without any change.

So we have adapted the project to use a different format on the English machine and when we try to edit the date the same message appears. "The field BithDate must be a date"

Attached is the modified project where we changed:

In DateTime editor we used @(Html.Kendo().DateTimePickerFor(m => m).Format("dd-MMM-yyyy")) and

in Index.cshtml we changed the columns.Bound(c=>c.BirthDate).Format("dd-MMM-yyyy")

 

[Stefan]

Hello Sebastian, Alexandra,

Thank you for the runnable example.

After additional investigation, indeed the issue occurs due to the different format set on the DateTime editor.

In this scenario, the built-in validation rule has to be overridden. Please check the following article demonstrating this:

http://docs.telerik.com/aspnet-mvc/troubleshoot/troubleshooting-validation#globalized-dates-and-numbers-are-not-recognized-as-valid-when-using-the-validator

I hope this will help to achieve the desired result.

Regards,
Stefan
Progress Telerik

[Alexandra]

Hello Stefan,

Thank you for the investigation and the suggestion, however our customer does not want for the moment custom format for dates. The default ones are good. But who know what the future holds so I do have 2 questions though:

1. On the link the example uses still kendo.parseDate. Should I still use this? (I did some debugging the this method was failing on the MVC project)

2. Why did Alex dojo example was working while the MVC was failing? (I wanted to debug Alex's dojo but there is no link to the unminified version of the telerik scripts)

Thank you,

Alexandra

[Alex Hajigeorgieva]

Hi Alexandra,

If I understand you correctly, you do not wish to use custom date formats. If this is the case, then the answer to the first question is no, there is no need to use the approach from the article.

1. On the link, the example uses still kendo.parseDate. Should I still use this? 

This is only needed for custom formats. The approach you need to take when using UI for MVC - is to match the culture on both the client and the server, otherwise, the validation will fail. One of our official demos shows dynamic culture changes:

http://demos.telerik.com/aspnet-mvc/grid/globalization

Client side culture is in the first tab, globalization.cshtml and the controller code is in the second tab:



Regarding the second question:

2. Why did Alex dojo example was working while the MVC was failing? 

My demo was working because validation was only handled on the client in this case. 

More information about keeping the server and client cultures in tune is available at:

http://docs.telerik.com/aspnet-mvc/getting-started/globalization

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Alexandra]

Hi Alex,

At a better look at the page found that the recommanded way for custom format in MVC is kendo.parseDate(input.val(), "dd/MM/yyyy") !== null;. I must have missed that.