jquery dates does not populate model object on post action

Question

i have this razor view:

<div class="panel-body">
    <div class="form-group row">
        <div class="col-sm-6">
            @Html.LabelFor(model => model.DrivingLicenceNo, "Licence No", htmlAttributes: new { @class = "control-label" })
            @Html.EditorFor(model => model.DrivingLicenceNo, new { htmlAttributes = new { @class = "form-control" } })
        </div>

        <div class="col-sm-6">
            @Html.LabelFor(model => model.DrivingLicenceExpiryDate, "Expiry Date", htmlAttributes: new { @class = "control-label" })
            @Html.EditorFor(model => model.DrivingLicenceExpiryDate, new { htmlAttributes = new { @class = "form-control" } })
        </div>
    </div>
    <div class="form-group row">
        <div class="col-sm-6">
            @Html.LabelFor(model => model.DrivingLicenceImage, "Licence Image", htmlAttributes: new { @class = "control-label" })
            <input type="file" name="uploadFile" />
        </div>
        <div class="col-sm-6">
            @Html.LabelFor(model => model.DateofBirth, "Date of Birth", htmlAttributes: new { @class = "control-label" })
            @Html.EditorFor(model => model.DateofBirth, new { htmlAttributes = new { @class = "form-control" } })
        </div>
    </div>
</div>

and to display dates, i am using the following script:

<script>
$(function() {
  $("#DrivingLicenceExpiryDate").datepicker({
      changeMonth: true,
      changeYear: true,
      dateFormat: 'dd-mmm-yyyy'
  });
  $("#DateofBirth").datepicker({
      changeMonth: true,
      changeYear: true,
      dateFormat: 'dd-mmm-yyyy'
  });

});

however without using the script, i get the dates populated in the post action method model but when i put the script back in, the dates in the model object does not get populated. i need to display the drop down menu to make it easier for the user to pick dates

So you are saying when you have this script, after you select a date using the datepicker and submit the form, these 2 field values are `null` ? — Shyju, Aug 27 '16 at 16:19
Is the editor template generating a date control? Something like `input type="date"`? — Tieson T., Aug 27 '16 at 16:21
no. it was but then i took it out (from the view model data annotation) because on registering the customer it did generate a pop up but once you populate it, the pop wouldn't get generated — Baahubali, Aug 27 '16 at 16:22
Seems like date format ossue. Could you please try MM dd yyyy in datepicker for testing? — Developer, Aug 27 '16 at 16:25

score 1 · Accepted Answer · edited May 23 '17 at 10:29

I am not sure your dateFormat is correct. With the format you specified currently, It will set a date like "25-088-20162016" to the input field. When the form is posted, Model binder will not be able to set this to a DateTime property as the value (or the format of the value) does not looks like a correct date time value.

Try this format.

$(function() {
        $("#DateofBirth").datepicker({
            changeMonth: true,
            changeYear: true,
            dateFormat: 'dd-mm-yy'
        });
 });

Or If you strongly believe that format is a valid date format (for some valid culture), you can set the culture in the server so that server knows how to process the input value coming in.

Adding 2 links for reference

i just changed the globalization settings to australian and it's working. — Baahubali, Aug 27 '16 at 16:28

Tieson T. · Answer 2 · 2016-08-27T16:32:51.520

Chrome has a native date control, which only supports dates in the format yyyy-MM-dd. Any other format will cause it to not bind the date when rendering the form.

Assuming you're using the default templates, you should have Modernizr installed, or you should add it. Then, do something like:

if (!Modernizr.inputtypes.date) {
    $('.date').datepicker({
        /* your options */
    });
}

and add the date class to your inputs.

If you want consistent rendering (every browser to use your datepicker plugin), do not use the EditorFor helper, but use the TextBoxFor helper instead (so that you get an input type="text" control).

Just for reference: Can I use: Date and time input types?

jquery dates does not populate model object on post action

2 Answers2

Linked