jQuery UI datepicker works on IE and Google Chrome, but not on Firefox

Question

This is my Layout page in ASP.NET MVC 5 project :

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Fabricator</title>

    @Styles.Render("~/Content/jqueryui")
    @Styles.Render("~/Content/css")

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryui")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/bootstrap")
</head>
<body>

    <div class="container body-content">

        @RenderBody()
    </div>




    <script type="text/javascript">
        $(function () {
            // This will make every element with the class "date-picker" into a DatePicker element
            $('.date-picker').datepicker({ dateFormat: "mm-dd-yy" });
        })
    </script>

    @RenderSection("scripts", required: false)
</body>
</html>

I call datepicker like this :

<div class="form-group">

    <label class="control-label col-md-2" for="ProjectDeadline">Project Deadline : </label>
    <div class="col-md-10">
        @Html.TextBoxFor(model => model.ProjectDeadline, new { @class = "date-picker"})
        @Html.ValidationMessageFor(model => model.ProjectDeadline)
    </div>
</div>

I have this in the model :

[DataType(DataType.Date)]
[DisplayFormat(DataFormatString =
   "{0:MM-dd-yyyy}",
    ApplyFormatInEditMode = true)]
public DateTime ProjectDeadline { get; set; }

This code works perfectly on IE and Chrome, but when I click Create, it says

The field ProjectDeadline must be a date.

Can you tell me how to fix this? Thanks.

Have you added any `data annotation` `Attribute` to `Model`? try with taking type `public string ProjectDeadline`. — Parth Trivedi, Dec 22 '15 at 09:50
You should add a custom model binder. You can find more details here http://stackoverflow.com/questions/2356601/custom-datetime-model-binder-in-asp-net-mvc — ssimeonov, Dec 22 '15 at 09:58
@ssimeonov, I'm using a custom model binder. I made it work with that, but still doesn't work on Firefox. — jason, Dec 22 '15 at 10:00
try to remove `[DataType(DataType.Date)]`.After binding `datepicker` with `mm-dd-yy` server side it can not understand as valid date format trigger validation. — Parth Trivedi, Dec 22 '15 at 10:00
Have you try to remove `[DisplayFormat(DataFormatString = "{0:MM-dd-yyyy}", ApplyFormatInEditMode = true)] ?` Problem with type `DateTime` only or `Attribute` problem. — Parth Trivedi, Dec 22 '15 at 10:05
When I remove `[DisplayFormat(DataFormatString = "{0:MM-dd-yyyy}", ApplyFormatInEditMode = true)]`, it starts to give error in Chrome as well... — jason, Dec 22 '15 at 10:09

jQuery UI datepicker works on IE and Google Chrome, but not on Firefox

0 Answers0