Kendo UI ASP.NET MVC format Date into ‘dd.MM.yyyy’

[Demian]

Hi,

I use Kendo UI ASP.NET MVC with VB.NET and jquery for client validation. My question is:
How I can format the date into ‘dd.mm.yyyy’. I also want to use the @Html.EditorFor() and the client validation.

Setting up the Model:

<DataType(DataType.[Date],
ErrorMessage:="Datumsformat ungültig")>
<DisplayFormat([ApplyFormatInEditMode]:=True,
[DataFormatString]:="{0:dd.MM.yyyy}")>_
Public Property Geburtstag As Nullable(Of DateTime)


Setting up the View:

         <td class="editor-label" style="width: 100px">
            @Html.LabelFor(Function(model) model.Geburtstag)
        </td>
        <td class="editor-field">
            @Html.EditorFor(Function(model) model.Geburtstag)
            @Html.ValidationMessageFor(Function(model) model.Geburtstag)
        </td>

 The client validation doesn’t accept the format ‘dd.MM.yyyy’ only the ‘dd/MM/yyyy’ format.

How I can overwrite the client validation for the date format?

I suppose the validation is in a jquery file.

Thanks for help

[Alexander Popov]

Hi Demian,

You can override the client's validation by using the Kendo UI DatePicker, which allows you to choose how the dates are formatted and what parse formats are accepted. Here is an example:

<td class="editor-label" style="width: 100px">
    @Html.LabelFor(Function(model) model.Geburtstag)
</td>
<td class="editor-field">
    @Html.Kendo().DateTimePickerFor(Function(model) model.Geburtstag).Format("dd.MM.yyyy")
    @Html.ValidationMessageFor(Function(model) model.Geburtstag)
</td>

Regards,
Alexander Popov
Telerik

[Demian]

Hi Alexander,

I set in the _Layout.vbhtml site the culture, like this
    <script>
        kendo.culture("de-CH");
            $("#datepicker").kendoDatePicker({
                culture: "de-CH"
            });
  </script>
and in the web.config file also:     <globalization culture="de-CH" uiCulture="de-CH"></globalization>

I tried to override the validation for the date format: (but in this case, the .validator property is not found)
        jQuery(function (jQuery) {
            $.validator.addMethod('date',
            function (value, element) {
                if (this.optional(element)) {
                    return true;
                }                var ok = true;
                try {
                    jQuery.datepicker.parseDate('dd.MM.yyyy', value);
                }
                catch (err) {
                    ok = false;
                }
                return ok;
            });
        });

In the view, I used the Kendo DatePickerFor like this:
@Html.Kendo.DatePickerFor(Function(model) model.Geburtstag).Format("dd.MM.yyyy")
and
 @(Html.Kendo().DatePickerFor(Function(model) model.Geburtstag).Name("Geburtstag").Format("dd.MM.yyyy").Culture("de-CH"))

but the validation is still wrong. (like description above)

Thanks for reply
Demian

[Alexander Popov]

Hello again Demian,

You can validate the input by using the Kendo UI Validator, as shown in this example.
In case the above example does not answer your question, please provide runnable project where the issue is reproduced, so we can advice you further.

Regards,
Alexander Popov
Telerik

[Demian]

Hi Alexander

 Here is an example project for you. When you start in the  "About View" and choose another Date for "Jahrgang”, then you can see the validation error (only dd/MM/yyyy is accepted). I need dd.MM.yyyy.

I would be very happy about any help.

Thanks in advance
Demian

[Alexander Popov]

Hi Demian,

Thank you for the provided project. I would recommend including the following scripts to you _Layout.cshtml:  

<script src="@Url.Content("~/Scripts/jquery.validate.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")"></script>

and then override the jQuery date validation method:   

<div id="body">
    <script>
        $(document).ready(function () {
            kendo.culture("de-DE"); //culture of your choice
            $.validator.addMethod('date',
               function (value, element) {
                   return this.optional(element) || kendo.parseDate(value)
               });
        });
    </script>

 
Regards,
Alexander Popov
Telerik

[Gareth]

I am struggling with validation of dates with the format dd/MM/yyyy hh:mm tt
I have the following in my _Layout.cshtml:
<script src="~/js/cultures/kendo.culture.en-ZA.min.js"></script>

I have hand-edited the kendo.culture.en-ZA.min.js to contain the following patterns:
patterns: { d: "dd/MM/yyyy", D: "dd MMMM yyyy", F: "dd MMMM yyyy hh:mm:ss tt", g: "dd/MM/yyyy hh:mm tt", G: "dd/MM/yyyy hh:mm:ss tt", m: "dd MMMM", M: "dd MMMM", s: "yyyy'-'MM'-'dd'T'HH':'mm':'ss", t: "hh:mm tt", T: "hh:mm:ss tt", u: "yyyy'-'MM'-'dd HH':'mm':'ss'Z'", y: "MMMM yyyy", Y: "MMMM yyyy" }

My editor template code is as follows:
@(Html.Kendo().DateTimePicker()
                    .Name("EstimatedTimeDeparture")
                    .Value(Model)
                    .Format("dd/MM/yyyy hh:mm tt")
                    .ParseFormats(new string[] { "dd/MM/yyyy hh:mm tt", "dd/MM/yyyy hh:mm", "dd/MM/yyyy" })

)

I have also tried adding this script, but I still get the same result:
<script>
            $(document).ready(function () {
                kendo.culture("en-ZA"); //culture of your choice
                $.validator.addMethod('date',
                   function (value, element) {
                       return this.optional(element) || kendo.parseDate(value)
                   });
            });
        </script>

[Alexander Popov]

Hi Gareth,

It seems that the server-side culture is not set or is different than the client-side culture. You can do that by adding the following string to your Web.config file:  

<globalization uiCulture="en-ZA" culture="en-ZA" enableClientBasedCulture="true" ></globalization>

Also please keep in mind that using modified culture files might have unexpected behavior.
I would recommend you to read the Kendo UI Globalization guide and check the updated version of your project I attached to this thread.

Regards,
Alexander Popov
Telerik

[Gareth]

Hi Alexander

Thanks for the reply.

I have tried using the project you sent me with modifications to work with the dd/MM/yyyy date format and it still fires the validation message " The field Jahrgang must be a date."  I attach my modified version of the project you sent me.

Your assistance will be appreciated.

Regards

Gareth

[Alexander Popov]

I noticed that the en-ZA culture file was not correctly loaded due to wrong path in the _Layout.cshtml file. Changing this  

<script src="~/Scripts/kendo/2013.2.716/cultures/kendo.culture.en-ZA.min.js"></script>

to this: 

<script src="~/Scripts/kendo/2013.2.918/cultures/kendo.culture.en-ZA.min.js"></script>

will fix the issue.

Regards,
Alexander Popov
Telerik