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

[Shawn]

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://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.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

[Konstantin Dikov]

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:

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

 
Best Regards,
Konstantin Dikov
Telerik by Progress

[Shawn]

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

[Konstantin Dikov]

Hello Shawn,

Could you please refer to the following help topic and go through the suggested links:

• http://docs.telerik.com/aspnet-mvc/troubleshoot/troubleshooting#client-validation-fails-with-invalid-date

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

[Shawn]

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

[Divyang]

Hi Shawn,

I was facing exact same problem and your code has resolved it, so thanks for posting the solution. I would say that I didn't required to decorate the model with data annotations or explicitly specify date format in widget configuration. All I have done is specified the culture in _Layout and in Web.config and added your code snippet to the page.