The field must be a date - format dd/MM/yyyy

5 posts, 0 answers
  1. Shawn
    Shawn avatar
    36 posts
    Member since:
    Jul 2016

    Posted 31 Jan Link to this post

    Hi,

    I have read as many of the post surrounding this issue that I could find and still have no clue as to whether there is a solution that has been supplied for what seems to be a simple enough request.  I simple want the DatePicker to format the date as dd/MM/yyyy (Culture en-IE), yet the validation keeps throwing this error. Here's what I have and maybe someone out there can suggest more things to try.

    My Model:

    [DataType(DataType.Date)]
    [Display(Name = "Birth Date")]
    [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
    public DateTime BirthDateE { get; set; }

     

    My _layout.cshtml:

    @*had to move it here from the bottom as otherwise ajax wouldn't work*@
    @Styles.Render("~/Content/kendo/css")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/kendo")
    @Scripts.Render("~/bundles/bootstrap")
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
     
    @RenderSection("styles", required: false)
    @RenderSection("scripts", required: false)
     
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
     
    @* Adding style for DatePicker *@
    <link href="../../Content/themes/base/all.css" rel="stylesheet" type="text/css" />
     
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
     
    @* NOT <script src="/ReportViewer/js/telerikReportViewer-10.2.16.1025.min.js"></script>*@
     
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
     
    <script src="@Url.Content("~/Scripts/cultures/kendo.culture.en-IE.min.js")"></script>
    <script>
        kendo.culture("en-IE");
    </script>

     

    My View:

    <tr>
        <td class="text-right" width="30%">
            @Html.LabelFor(model => model.BirthDateE)
        </td>
        <td width="70%">
            <div class="form-group">
                @(Html.Kendo().DatePickerFor(model => model.BirthDateE)
                    .Culture("en-IE")
                    .Format("dd/MM/yyyy")
                    .ParseFormats(new List<string>() { "dd/MM/yyyy" })
                    .HtmlAttributes(new { @class = "form-control" }))
                @Html.ValidationMessageFor(model => model.BirthDateE, "", new { @class = "text-danger" })
            </div>
        </td>
    </tr>

     

    My web.config:

    <system.web>
      <globalization culture="en-IE" uiCulture="en-IE" />
      <authentication mode="None" />
      <compilation debug="true" targetFramework="4.5.2" />
      <httpRuntime targetFramework="4.5.2" />
    </system.web>

     

    And my resulting screen shot is attached.

     

    What am I missing to get this working?  It should not be this difficult!!!

    Shawn

  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1962 posts

    Posted 02 Feb Link to this post

    Hello Shawn,

    Everything works correctly on my side using the configuration that you have, so I would suggest that you inspect the Network tab in the browser's Developer Tools and see if the culture file is loaded correctly:
    ~/Scripts/cultures/kendo.culture.en-IE.min.js

    You can also refer to the following help article for additional information on the globalization:
     
    Best Regards,
    Konstantin Dikov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Shawn
    Shawn avatar
    36 posts
    Member since:
    Jul 2016

    Posted 02 Feb in reply to Konstantin Dikov Link to this post

    Konstantin,

    I checked the scripts that are being loaded and the culture script is listed.  I have attached a screen shot showing all the scripts that are being loaded for the page in question.  I'm not sure if this would matter, but the validation is failing in a Kendo popup window as shown in the screen shot.

    Regards,

    Shawn

  4. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1962 posts

    Posted 06 Feb Link to this post

    Hello Shawn,

    Could you please refer to the following help topic and go through the suggested links:
    If that does not help you can try to remove the ApplyFormatInEditMode from the model and see if that will make any difference.

    Looking forward to your reply with the results.


    Regards,
    Konstantin Dikov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Shawn
    Shawn avatar
    36 posts
    Member since:
    Jul 2016

    Posted 09 Feb Link to this post

    Konstantin,

    I finally got this working.  I ended up removing the references to the validation and culture scripts from the _layout.cshtml page and inserted them into the page containing the datepicker.  I also added the following code to the document.ready section in the JavaScript block on the same page as the datepicker.

    kendo.culture("en-IE");
    $.validator.addMethod('date',
       function (value, element) {
           var isValidDate = this.optional(element) || kendo.parseDate(value);
           return isValidDate
       });

     

    Not sure why it does not work when these scripts are in the layout file, but at least it is working.

    Thanks for the help.

    Shawn

Back to Top