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

2 Answers 5394 Views
Date/Time Pickers
Shawn
Top achievements
Rank 1
Shawn asked on 31 Jan 2017, 04:06 PM

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 Answers, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 02 Feb 2017, 02:22 PM
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.
Shawn
Top achievements
Rank 1
commented on 02 Feb 2017, 04:42 PM

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
Telerik team
commented on 06 Feb 2017, 03:01 PM

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.
0
Shawn
Top achievements
Rank 1
answered on 09 Feb 2017, 10:02 AM

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
Top achievements
Rank 1
commented on 01 Nov 2018, 10:23 AM

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.

Tags
Date/Time Pickers
Asked by
Shawn
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Shawn
Top achievements
Rank 1
Share this question
or