dd/mm/yyyy date validation MVC

Question

I have made an MVC application where the user selects a start date and finish date. They input this data using a jQuery datepicker. However when I click save I get a validation message saying that it's not a validate date. The textbox accepts the date format yyyy/mm/dd. Not sure why I'm getting these validation messages as I have tried a number of things.

My code is as follows

Create.cshtml View

      <div class="form-group">
            <script src="@Url.Content("~/Scripts/jquery-ui.min.js")" type="text/javascript"></script>
            <link href="@Url.Content("/Content/jquery-ui.min.css")" rel="stylesheet" type="text/css" />
            @Html.LabelFor(model => model.StartDate, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">


                <input type="text" id="MyDate"
                       @Html.EditorFor(model => model.StartDate, "{0:dd/MM/yyyy}", new { htmlAttributes = new { @class = "form-control" } })
                       @Html.ValidationMessageFor(model => model.StartDate, "", new { @class = "text-danger" }) />

            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.FinishDate, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <input type="text" id="FinishDate"
                       @Html.EditorFor(model => model.FinishDate, "{0:dd/MM/yyyy}", new { htmlAttributes = new { @class = "form-control" } })
                       @Html.ValidationMessageFor(model => model.FinishDate, "", new { @class = "text-danger" }) />
            </div>
        </div>


        <p>
            <button class="btn btn-success"><span class="glyphicon glyphicon-plus"></span>Create</button>
        </p>
        </div>
        }



<script type="text/javascript">
    $(document).ready(function () {
        $("#MyDate").datepicker();

            $.validator.methods.date = function (value, element) {
                Globalize.culture("en-AU");
                // you can alternatively pass the culture to parseDate instead of
                // setting the culture above, like so:
                // parseDate(value, null, "en-AU")
                return this.optional(element) || Globalize.parseDate(value) !== null;
            }

    });
</script>


<script type="text/javascript">
    $(document).ready(function () {
        $("#FinishDate").datepicker();

    });
</script>
<div>
    <a class=" btn btn-primary" href="@Url.Action("Index")"><span class=" glyphicon glyphicon-home"></span>&nbsp;Task List</a>
</div>



        @section Scripts {
            @Scripts.Render("~/bundles/jqueryval")
        }

I also tried adding this to the webconfig

 <globalization culture="en-AU" uiCulture="en-AU" />

Please add your view model code - I assume you could make use of the DisplayFormat Attribute if you haven't allready. — Joshua Duxbury, Sep 15 '16 at 18:17
@ErikFunkenbusch thanks for your input and I will be sure to change my question but have you actually got any idea on how to fix my issue? — Craig Gallagher, Sep 15 '16 at 23:20

score 0 · Answer 1 · edited May 23 '17 at 10:33

Assume that you have these model properties:

public DateTime? StartDate { get; set; }
public DateTime? FinishDate { get; set; }

Looking on your context, you should already have globalize.js and globalize.culture.en-AU.js in your scripts directory, thus you need to apply preset date format in edit mode like this:

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

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

By overriding jQuery basic validation with globalization plugin, EditorFor will use preset date format given in property attribute.

The globalization code should be similar to this example:

<script type="text/javascript">
    $(document).ready(function () {
        $("#MyDate").datepicker();
        $("#FinishDate").datepicker();

        $.validator.methods.date = function (value, element) {
                Globalize.culture("en-AU");
                // you can alternatively pass the culture to parseDate instead of
                // setting the culture above, like so:
                // parseDate(value, null, "en-AU")
                return this.optional(element) || Globalize.parseDate(value) !== null;
        }
    });
</script>

Similar problem for further reference: MVC 4 date culture issue?

Sorry I'm looking to accept a MM/dd/yyyy format as that's the way the datePicker enters the date.Yes I have added them 2 scripts and added this `[DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}", ApplyFormatInEditMode = true)] [DataType(DataType.Date)] public DateTime? StartDate { get; set; } [DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}", ApplyFormatInEditMode = true)] [DataType(DataType.Date)] public DateTime? FinishDate { get; set; }` to my model folder and included the javascript code but it's still saying "The value '09/14/2016' is not valid for StartDate." — Craig Gallagher, Sep 16 '16 at 10:17
What globalization script should I add to accept this format? — Craig Gallagher, Sep 16 '16 at 10:17

dd/mm/yyyy date validation MVC

1 Answers1