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

10 posts, 0 answers
  1. Demian
    Demian avatar
    4 posts
    Member since:
    Sep 2013

    Posted 19 Sep 2013 Link to this post

    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







  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 23 Sep 2013 Link to this post

    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!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Demian
    Demian avatar
    4 posts
    Member since:
    Sep 2013

    Posted 24 Sep 2013 Link to this post

    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
  5. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 26 Sep 2013 Link to this post

    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!
  6. Demian
    Demian avatar
    4 posts
    Member since:
    Sep 2013

    Posted 30 Sep 2013 Link to this post

    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

  7. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 01 Oct 2013 Link to this post

    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!
  8. Gareth
    Gareth avatar
    5 posts
    Member since:
    Oct 2012

    Posted 02 Oct 2013 Link to this post

    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>
  9. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 04 Oct 2013 Link to this post

    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!
  10. Gareth
    Gareth avatar
    5 posts
    Member since:
    Oct 2012

    Posted 07 Oct 2013 Link to this post

    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
  11. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 08 Oct 2013 Link to this post

    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!
Back to Top
UI for ASP.NET MVC is VS 2017 Ready