Asp.net MVC DateTime error on valid dates

Question

I'm working on a calendar where I can create events. While using the jquery datetime picker there is no live validation error, but when I press on create there is an validation error where it states that;

The value 'the date i filled in' is not valid for StartDateTime.

I think that after I press create it tries to validate on a different format. I don't know which one and how I check this.

Here you have the code that is related to creating this.

Event model:

    public class Event
{
    public int Id { get; set; }
    public string Subject { get; set; }
    public string Description { get; set; }
    public DateTime StartDateTime { get; set; }
    public DateTime EndDateTime { get; set; }
    public string ThemeColor { get; set; }
    public bool IsFullDay { get; set; }
}

The create page:

@model BudoschoolTonNeuhaus.Models.Event

@{
    ViewBag.Title = "Create";
    Layout = "~/Views/Shared/_Admin_Layout.cshtml";
}
<div class="container">
    <h2>Create</h2>

    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()

        <div class="form-horizontal">
            <h4>Event</h4>
            <hr />
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            <div class="form-group">
                @Html.LabelFor(model => model.Subject, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Subject, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Subject, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Description, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.StartDateTime, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.StartDateTime, new { htmlAttributes = new { @class = "form-control datepicker" } })
                    @Html.ValidationMessageFor(model => model.StartDateTime, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.EndDateTime, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.EndDateTime, new { htmlAttributes = new { @class = "form-control datepicker" } })
                    @Html.ValidationMessageFor(model => model.EndDateTime, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.ThemeColor, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.ThemeColor, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.ThemeColor, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.IsFullDay, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    <div class="checkbox">
                        @Html.EditorFor(model => model.IsFullDay)
                        @Html.ValidationMessageFor(model => model.IsFullDay, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>


            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Create" class="btn btn-default" />
                </div>
            </div>
        </div>
    }

    <div>
        @Html.ActionLink("Back to List", "AdminIndex")
    </div>
</div>

@section Scripts{
    <script>
        $('.datepicker').datepicker({ });
    </script>
 }

Thanks for your help in regard

What format is the date you're sending? The error is stating that C# cannot parse it to a DateTime — Rory McCrossan, Aug 10 '17 at 09:34
I think this is related to culture & datepicker issue. The error states `DateTime` value can't be parsed, which values causing the error? — Tetsuya Yamamoto, Aug 10 '17 at 09:34
`The value 'the date i filled in' is not valid for StartDateTime.` This error occurs while convert from string to datetime — Alsamil Mehboob, Aug 10 '17 at 09:36
You need to set `datepicker` depending culture you're used & override default jQuery validation for datetime with globalize, see https://stackoverflow.com/questions/28349683/asp-mvc-datetime-validation-error & https://stackoverflow.com/questions/7889038/asp-net-mvc-datetime-culture-issue-when-passing-value-back-to-controller for similar issue. — Tetsuya Yamamoto, Aug 10 '17 at 09:39
@Diceble did you try to use $('.datepicker').datepicker({ dateFormat: 'mm-dd-yyyy' }); — hasan, Aug 10 '17 at 10:47
@TetsuyaYamamoto I don't fully understand what you mean. Where can i see which culture is used? I looked into globalize but couldn't figure out how to set it up... — Diceble, Aug 10 '17 at 11:28
@Diceble By default your site culture follows regional settings configuration on your machine. If the culture is different than default one used by datepicker, then you need to use custom input format & overriding default validation schema. — Tetsuya Yamamoto, Aug 10 '17 at 11:39

score 0 · Answer 1 · answered Sep 17 '17 at 13:11

// http://docs.jquery.com/Plugins/Validation/Methods/date
date: function( value, element ) {
return this.optional(element) || !/Invalid|NaN/.test(new Date(value).toString());}

Put a break point on line 1026 (?) of scripts/jquery.validate.js I edited it to:

    date: function (value, element) {
    return this.optional(element) || moment(value, "DD-MMM-YYYY").isValid();
    },

The other thing I did was to put DataAnnotations in the POCO class: [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd-MMM-yyyy}")]

$("input[type='datetime']").datepicker({ dateFormat: "dd-M-yy" });

might work

Asp.net MVC DateTime error on valid dates

1 Answers1