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

1 Answer 2692 Views
Date/Time Pickers
Demian
Top achievements
Rank 1
Demian asked on 19 Sep 2013, 11:55 AM
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







1 Answer, 1 is accepted

Sort by
0
Alexander Popov
Telerik team
answered on 23 Sep 2013, 07:14 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Demian
Top achievements
Rank 1
commented on 24 Sep 2013, 12:10 PM

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
Telerik team
commented on 26 Sep 2013, 08:00 AM

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Demian
Top achievements
Rank 1
commented on 30 Sep 2013, 06:29 AM

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
Telerik team
commented on 01 Oct 2013, 07:13 AM

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Gareth
Top achievements
Rank 1
commented on 02 Oct 2013, 12:33 PM

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
Telerik team
commented on 04 Oct 2013, 07:12 AM

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Gareth
Top achievements
Rank 1
commented on 07 Oct 2013, 02:02 PM

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
Telerik team
commented on 08 Oct 2013, 10:59 AM

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Date/Time Pickers
Asked by
Demian
Top achievements
Rank 1
Answers by
Alexander Popov
Telerik team
Share this question
or